【前端框架学习】生命周期函数 中 组件运行与销毁时的钩子函数
摘要
·
<div id="app">
<h3 id="h3">
{{message}}
</h3>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello,Vue!"
},
methods: {
create(){
console.log('hello,world!');
}
}
});
</script>
一、组件运行时的钩子函数触发时间
1.beforeUpdate
这时候,表示我们的界面还没有被更新。那么此时的数据被更新了吗?答案是肯定的,因为数据永远都是最新的。
我们首先写一个beforeUpdate函数来读取h3中message的内容:
(放在methods之后)
beforeUpdate(){
console.log('界面上的内容:'+document.getElementById('h3').innerText);
console.log('data中的msg数据是:' + this.message);
}
运行可以发现并没有输出,这是因为data数据发生改变以后才会执行beforeUpdate中的内容。
我们为h3添加一个按钮用于修改message的内容:
<input type="button" value="修改msg" @click="message='hello,Java!'">
运行代码之后,页面上的内容已经发生了改变,但是两个输出内容并不一致,这是是什么呢。
这是因为,当执行beforeUpdate的时候,页面中的显示的数据,还是旧的,此时
data数据是最新的,页面尚未和最新的数据保持同步。
2.updated
updated事件执行的时候,页面和data数据已经保持同步了,都是最新的。
var vm = new Vue({
el: "#app",
data: {
message: "hello,Vue!"
},
methods: {
create() {
console.log('hello,world!');
}
},
updated() {
console.log('界面上的内容:' + document.getElementById('h3').innerText);
console.log('data中的msg数据是:' + this.message);
}
});
二、组件销毁时的钩子函数触发时间
1.beforeDestroy和destroyed
当执行beforeDestroy 钩子函数的时候,Vue实例就已经从运行阶段,进入到了销毁阶段;当执行 beforeDestroy 的时馍,实例身上所有的data和所有的methods,以及过滤器、指令….都处于可用状态,此时,还没有真正执行销毁的过程。
当执行到destroyed函数的时候,组件已经被完全销毁了,此时,组件中所有的数据、方法、指令、过滤器…都已经不可用了。
三、总结
更多推荐
已为社区贡献1条内容
所有评论(0)