准备工作
vue生命周期的帖子网上已经一大片,这里通过代码的形式体验一下vue每一个阶段所发生的事
基础代码如下:
<div id="root">
<span>{{n}}</span>
<button @click="n++">点击</button>
</div>
<script>
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
很简单的vue界面,点击按钮,span元素内容自增
生命周期流程
beforeCreate
这个阶段发生在vue初始化之时,这时候vue初始化生命周期、还没有完成数据代理,因此无法通过vm访问到data中的数据以及methods中的方法.
在实例中添加这个钩子函数
beforeCreate(){
console.log("beforeCreate")
console.log(this)
debugger;
}
可以看到此时页面没有渲染,vue实例中没有数据代理和数据绑定
created
beforeCreate之后,vue开始进行数据检测,完成数据代理,之后就是create钩子所在的阶段,这时候就可以通过vue访问到data中的数据,创建该钩子进行测试
created(){
console.log("created")
console.log(this)
debugger
}
可以看到此时页面还没有被渲染,但是实例中已经能访问到绑定的数据
接下来,vue开始根据el属性绑定的html解析模板,然后生成虚拟dom,并把虚拟dom作为属性添加到实例中,但此时页面还不能显示解析好的内容。
beforeMount
此时的vue已经准备好虚拟dom,但还没有开始渲染界面,此时即使操作了dom,最终也是没有效果,因为后期vue渲染会重新将dom渲染回去.
beforeMount(){
console.log("beforeMount")
console.log(this)
debugger
}
在控制台中操作dom,页面发生变化
释放断点,vue继续运行,dom重新被覆盖,之前操作无效果
mounted
beforeMount之后,vue开始根据虚拟dom渲染html,此时vue初始化结束,一般在此时可以进行网络请求,绑定事件、订阅消息等操作,这也是很常用的一个钩子。
beforeUpdate
数据更新伴随的是页面重新渲染,但是在这个阶段,数据会更新,但是页面还没有完成渲染
beforeUpdate(){
console.log("beforeUpdate")
debugger
}
点击按钮,n数值+1,但页面中还是1
updated
此时完成虚拟dom的对比,渲染页面
beforeDestroy
此时vue的实例还发挥作用,但开始准备销毁工作,此时再对数据进行改变,不会发生渲染,因为不会走updated
destroyed
vue销毁,实例不会发生作用