|
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。 1.生命周期函数beforeCreate 组件没有创建之前触发created 组件创建完成没有渲染时触发beforeMount 组件渲染之前触发mounted 组件渲染之后触发beforeUpdate data改变，组件更新前触发updated data改变，组件更新后触发beforeDestroy 组件销毁之前触发destroyed 组件销毁之后触发2.生命周期图示 3.生命周期函数基本用法var vm = new Vue({
el: '#app',
data: {
msg:'ok'
},
methods: {
show:function () {
console.log("执行了show方法");
},
//调用钩子函数destroy
destroy(){
//通过this来调用，this表示全局对象
this.$destroy();
}
},
beforeCreate(){
/*
这是一个生命周期函数，表示在实例完全创建出来之前会执行他
在执行beforeCreate时，data和methods中的数据还没有初始化
*/
console.log(this.msg); //undefined
},
created(){
/*
第二个生命周期函数
在created中，data和methods都已经初始化好
如果要调用methods中的方法或者data中的数据，最早只能在created中操作
*/
console.log(this.msg); //ok
this.show(); //执行了show方法
},
beforeMount(){
/*
第三个生命周期函数
已经在内存中编辑完成，但没有渲染到页面中
*/
console.log(document.getElementById("h3").innerText); //{{ msg }}
},
mounted(){
/*
第四个生命周期函数
内存中已经真实的挂载带页面中去了，用户可以看到渲染好的页面
注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted后，表示实例别完全创建好了
如果要操作元素的DOM操作，最早在mounted中操作
*/
console.log(document.getElementById("h3").innerText); //ok
},
beforeUpdate(){
/*
第五个生命周期函数
我们的界面还没有更新，但是数据已经更新了
也就是执行beforeUpdate时，页面中显示的数据还是旧的，此时，data中的数据已经更新了
*/
console.log("页面中的值：" + document.getElementById("h3").innerText); //ok
console.log("data中msg的值" + this.msg); //No
},
updated(){
/*
第六个生命周期函数
执行时，页面中的数据与data中的数据已经同步了
*/
console.log("页面中的值：" + document.getElementById("h3").innerText); //No
console.log("data中msg的值" + this.msg); //No
},
beforeDestroy() {
/*
第七个生命周期函数
当执行该函数时，Vue实例已经从执行阶段进入了销毁阶段，
但是实例上所有的data和methods、过滤器、指令都还可用，此时还没有真正的销毁
*/
//注意：当时用了定时器时，需要我们在该函数下手动的销毁定时器，否则会造成内存泄漏
},
destroyed(){
/*
第八个生命周期函数
当执行了该函数时，组件已经完全被销毁，组件中所有的数据、方法、指令、过滤器都已经不可用
*/
}
});
| 
3.生命周期函数基本用法var vm = new Vue({
el: '#app',
data: {
msg:'ok'
},
methods: {
show:function () {
console.log("执行了show方法");
},
//调用钩子函数destroy
destroy(){
//通过this来调用，this表示全局对象
this.$destroy();
}
},
beforeCreate(){
/*
这是一个生命周期函数，表示在实例完全创建出来之前会执行他
在执行beforeCreate时，data和methods中的数据还没有初始化
*/
console.log(this.msg); //undefined
},
created(){
/*
第二个生命周期函数
在created中，data和methods都已经初始化好
如果要调用methods中的方法或者data中的数据，最早只能在created中操作
*/
console.log(this.msg); //ok
this.show(); //执行了show方法
},
beforeMount(){
/*
第三个生命周期函数
已经在内存中编辑完成，但没有渲染到页面中
*/
console.log(document.getElementById("h3").innerText); //{{ msg }}
},
mounted(){
/*
第四个生命周期函数
内存中已经真实的挂载带页面中去了，用户可以看到渲染好的页面
注意：mounted是实例创建期间的最后一个生命周期函数，当执行完mounted后，表示实例别完全创建好了
如果要操作元素的DOM操作，最早在mounted中操作
*/
console.log(document.getElementById("h3").innerText); //ok
},
beforeUpdate(){
/*
第五个生命周期函数
我们的界面还没有更新，但是数据已经更新了
也就是执行beforeUpdate时，页面中显示的数据还是旧的，此时，data中的数据已经更新了
*/
console.log("页面中的值：" + document.getElementById("h3").innerText); //ok
console.log("data中msg的值" + this.msg); //No
},
updated(){
/*
第六个生命周期函数
执行时，页面中的数据与data中的数据已经同步了
*/
console.log("页面中的值：" + document.getElementById("h3").innerText); //No
console.log("data中msg的值" + this.msg); //No
},
beforeDestroy() {
/*
第七个生命周期函数
当执行该函数时，Vue实例已经从执行阶段进入了销毁阶段，
但是实例上所有的data和methods、过滤器、指令都还可用，此时还没有真正的销毁
*/
//注意：当时用了定时器时，需要我们在该函数下手动的销毁定时器，否则会造成内存泄漏
},
destroyed(){
/*
第八个生命周期函数
当执行了该函数时，组件已经完全被销毁，组件中所有的数据、方法、指令、过滤器都已经不可用
*/
}
});