vue生命周期
Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程
生命周期分为四个方面,八个阶段
1、beforeCreate(创建前) 2、created(创建后)
3、beforeMount(挂载前) 4、mounted(挂载后)
5、beforeUpdate(更新前) 6、updated(更新后)
7、beforeDestory(销毁前) 8、destoryed(销毁后)
1、beforeCreate(创建前)
表示实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化。
// 一. 初始化
// new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
beforeCreate() {
console.log('beforeCreate -- 执行')
console.log(this.msg) // undefined
},
2、created(创建后)
data和methods初始化以后 ,场景: 网络请求, 注册全局事件
3、beforeMount(挂载前)
真实DOM挂载之前 场景: 预处理data, 不会触发updated钩子函数
4、mounted(挂载后)
真实DOM挂载以后 场景: 挂载后真实DOM
5、beforeUpdate(更新前)
前提: data数据改变才执行
6、updated(更新后)
当 data 变化时,会触发 updated 方法。页面和 data 数据已经保持同步了。
7、beforeDestory(销毁前)
组件销毁之前调用 ,在这一步,实例仍然完全可用。
8、destoryed(销毁后)
组件销毁之后调用,对 data 的改变不会再触发周期函数,vue 实例已解除事件监听和 dom绑定,但 dom 结构依然存在。