vue基础--vue的生命周期
vue基础---vue的生命周期
一、什么是Vue生命周期
Vue实例从创建到销毁的过程。 vue的每个组件从创建到销毁都会经历 是系统特定的过程,就是vue的生命周期。
二、生命周期介绍
1.阶段
vue的生命周期可以简单的分为四个阶段:创建阶段,挂载阶段,更新阶段,销毁阶段。
- 创建阶段--beforeCreate,created
- 挂载阶段--beforeMount,mounted
- 更新阶段--beforeUpdate,updated
- 销毁阶段--beforeDestroy,destroyed
2.作用
- 创建后 发起Ajax请求
- 挂载后操作dom
- 添加事件监听
- 销毁前移除间隔调用 事件监听
tips:不是每个生命周期都必须使用
三、生命周期详解
1.创建阶段
创建阶段可以看做一个vue实例生命周期的开始,这个阶段 vue组件开始初始化,vue开始观察数据,这个阶段有 beforeCreate 和 created 两个生命周期钩子函数。
(1)beforeCreate 创建前
特点:有this,但此时data、methods、computed以及watch上的数据和方法还未初始化,都不能被访问。
(2) created 创建后
特点:此时的data 和 methods 都已经被初始化,但是没有$el,dom节点
作用:ajax请求 定时器 事件监听(window)
2.挂载阶段
这个阶段将实现 DOM 的挂载,这标志着我们可以在浏览器里中看到页面了。
(1) beforeMount 挂载前
特点: template 模板已导入渲染函数编译。此时虚拟Dom已经创建完成,即将开始渲染。在这一阶段也可以对数据进行更改。
(2)mounted 挂载后
特点:在挂载完成后发生,此时真实的Dom挂载完毕,数据完成双向绑定,可以访问到、Dom节点,使用$refs属性对Dom进行操作。
作用:操作节点,ajax请求
3.更新阶段
(1)beforeUpdate 更新前
特点:会执行多次 数据更新 dom节点没有更新
(2) updated 更新完毕
特点:会执行多次 数据更新,dom节点也更新
4.销毁阶段
(1)beforeDestroy 销毁前
特点:数据可以更新 视图已经不更新
作用:移除事件监听 停止定时器
(2)destoryed 销毁完毕
特点:没有this,切换视图与vue实例的联系
四、生命周期图例
更多推荐
所有评论(0)