mounted钩子函数_详解 vue 生命钩子函数

好,接下来让我们学习一下vue的生命周期, 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(“销毁了”);}

这就是vue的八个钩子函数(也叫生命周期),vue 的生命周期很重要,学好了vue的生命周期学懂了一半vue,这里已经讲得比较清楚,如果还有疑问,欢迎一起来探讨.
————————————————
版权声明：本文为CSDN博主「penddymkq」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_28949779/article/details/112181409