Vue的生命周期(以下的所有链接均为转载)
Vue的生命周期:
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,Vue实例从创建到销毁的过程
Vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作
1. 创建(Create ) beforeCreate created
2. 载入 (Mount) beforeMount mounted
3. 更新 (Update) beforeUpdate updated
4. 销毁 (Destroy) beforeDestroy destroyed
这些生命周期钩子函数都是写在与data同级的。
实例:
let app = new Vue({
el: "#box",
data: {
msg: "测试"
},
beforeCreate() { //创建vue实例前
console.log("------------beforeCreate-------------");
console.group(this.$el, this.$data, this.msg) //分组输出
//输出 undefined undefined undefined
},
created() { //创建vue实例后
console.log("------------created-------------");
console.group(this.$el, this.$data, this.msg)
//输出 undefined obj 测试
},
beforeMount() { //vue实例挂载前(绑定元素前)
console.log("------------beforeMount-------------");
console.group(this.$el, this.$data, this.msg)
//输出 虚拟DOM obj 测试
//注意:这里是虚拟DOM,只是获取而已,但是页面上的插值表达式还没有把数据渲染出来
},
mounted() { //vue实例挂载后(绑定元素后)
console.log("------------mounted-------------");
console.group(this.$el, this.$data, this.msg)
//输出 虚拟DOM obj 测试
//注意:页面的插值表达式开始渲染
},
beforeUpdate() { //数据修改前(只有在数据发生变化的时候才会触发这个周期)
console.log("------------beforeUpdate-------------");
console.group(this.$el, this.$data, this.msg)
},
updated() { //数据修改后(只有在数据发生变化的时候才会触发这个周期)
console.log("------------updated-------------");
console.group(this.$el, this.$data, this.msg)
},
beforeDestory() { //示例销毁前(只有在示例被销毁的时候才会触发这个周期)
console.log("------------beforeDestory-------------");
console.group(this.$el, this.$data, this.msg)
},
destoryed() { //示例销毁后(只有在示例被销毁的时候才会触发这个周期)
console.log("------------destoryed-------------");
console.group(this.$el, this.$data, this.msg)
}
//可以用 app.$destory(); 这个方法把实例销毁
//注意:示例销毁后,dom不再被vue进行管理,双向绑定被取消,页面的数据不会更新
})
创建期间的生命周期函数:
1、beforeCreate:(创建实例之前)
实例刚在内存中被创建出来,但是这时候还没有初始化好 data 和 methods 属性,都是undefined
2、created:(创建实例之后)
实例已经在内存中创建OK,这时候 data 和 methods 都已经创建好了,此时还没有开始编译模板,也就是挂载还没有关联
3、beforeMount:(实例挂载前)
此时已经完成了模板的编译(加载完HTML),挂载点也和页面关联了,但是页面的模板还没有把 Vue 的数据渲染,只是显示插值表达式而已
4、mounted:(实例挂载后)
页面的插值表达式开始渲染
运行期间的生命周期函数:
1、beforeUpdate:(修改数据前)
状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的数据还是旧的,因为此时还没有开始重新渲染DOM节点
2、updated:(修改数据后)
实例更新完毕之后调用此函数,此时 data 中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
销毁期间的生命周期函数:
1、beforeDestroy:(实例销毁前)
实例销毁之前调用。在这一步,实例仍然完全可用。
2、destroyed:(示例销毁后)
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。 dom不再被vue进行管理,双向绑定被取消,页面的数据不会更新
生命周期图解:
(网络异常,等网络好之后再上传)