vue生命周期
生命周期?何为生命周期?表示一个程序的初始化以及程序结束经过的流程!接下来看一下Vue官方实例的声明周期图示!
上面的流程展示了8个不同时段的函数,都是在响应时刻自动执行的!
<div id="app">
{{desc}}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
desc:"这是用于学习"
},
beforeCreate:function(){
console.log('beforeCreate')
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log('beforeMount')
},
mounted:function(){
console.log('mounted')
},
beforeDestroy:function(){
console.log('beforeDestory')
},
destroyed:function(){
console.log('destoryed')
},
beforeUpdate:function(){
console.log('beforeUpdate')
},
updated:function(){
console.log('updated')
}
})
</script>程序运行结构如下图
发现前四个函数以及被自动执行，那么剩余的为何不自动执行呢？
beforeDestroy,和destroyed表示在实例销毁的时候执行,
使用app.$destroy()可以销毁vue实例,但是此时页面不会更新数据!但是app.desc改变model层则无法改变视图层,因为此时的vue实例已经被销毁了,实例销毁则会触发这两个事件!
beforUpdate和updated是数据层被改变时候触发!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读