Vue的生命周期函数

vue 生命钩子函数图

一张图让一目了然，豁然开朗，奥里给

那么接下来让我们一起细细的了解，你准备好了吗？

1.beforeCreate(){console.log(“创建之前”);}, beforeCreate(),这是第一个生命周期函数, 表示实例完全被创建出来之前, 会执行它,此时data和methods中的数据和方法都还没有被初始化,在这里是获取不到data中的数据

的,console会报错,undefined

2.created(){console.log(“创建完成”);}, created()这是第二个命周期函数 在created 中, data和methods,都已经被初始好了,所以 如果要调用 methods 中的方法, 或者操作data中的数据, 最早只能在created 中操作

3.beforeMount(){console.log(“挂载之前”);}, 这是第三个生命周期函数,表示模板已经在内存中编译完成了,但是尚未把数据模板渲染到页 如果这个时候想获取页面中的元素只能获取到未编译的值console.log

(document.getElementById(“h3”).innerText);

console.log(this.$refs.myh3); //undefind 还没有获取到dom元素,在 beforeMount执行的时候, 页面中的元素, 还没有被真正替换过来, 只是之前写的一些模板字符串

4.mounted(){console.log(“挂载完成”);},这是第四个生命周期函数,表示 内存中的模板,已经真实的挂载到了页面中, 用户已经可以看到渲染好的页面了

console.log(document.getElementById(“h3”).innerText);

console.log(this.$refs.hh3.innerText); //ok 这句话表明 要操作dom 元素至少在挂载完成后

注意 : mounted 是实例创建期间的最后一个生命周期, 当执行完mounted 就表示,实例已经被完全创建好了, 此时, 如果没有其他操作的话, 这个实例, 就静静的躺在我们的内存中, 一动不动

5.接下来是运行中的两个事件

beforeUpdate(){ //这个时候表示 , 页面还没有被更新,数据更新了

console.log(“页面上元素的内容:” + document.getElementById(“h3”).innerText);

console.log(“data中的msg数据是:” + this.msg);

结论: 当执行了beforeUpdate 的时候,页面中显示的数据还是旧的,此时data中的数据是最新的, 页面尚未和最新的数据保持同步

6.updated(){console.log(“更新完成”+this.message);}, console.log(“页面上元素的内容:” + document.getElementById(“h3”).innerText);

console.log(“data中的msg数据是:” + this.msg);

updated 事件执行的时候, 页面和data 中的数据已经保持同步了, 都是最新的

7.beforeDestroy(){console.log(“销毁之前”);},

8.destroyed(){console.log(“销毁了”);}

你学会了吗？