Vue的生命周期函数是指在Vue实例由创建最初到完整的运行一次这个过程中会触发的函数
可以理解为每一个Vue的实例在被创建出来的时候都需要有一个过程，例如我们要编译模板，要将实例挂载到某个元素上等，而在这一系列的执行过程中就会触发Vue自身设定的一些函数，而根据这些函数执行的时期的不同我们可以针对性的在不同函数执行时做一些操作
所有的生命周期钩子会自动绑定this上下文到实例中，因此我们可以在生命周期钩子中访问实例数据，对属性和方法进行运算，切记不可以使用箭头函数来定义一个生命周期方法，因为箭头函数会自动绑定上下文的关系，此时的this绑定不会是Vue实例
lifecycle.png
beforeCreate
在实例初始化之后，在这个阶段Vue重写data/computed中的getter/setter方法，数据和方法没有被配置之前被调用
created
在实例已经创建完成之后被调用，在这一步，实例已经完成以下的配置：数据，属性和方法的运算，watch/event事件回调，但是挂载阶段还没开始，$el属性目前不可见
在这个阶段，我们可以获取实例中的数据和方法，并对DOM中的每个节点进行处理，匹配{{ }}插值和v-model、v-bind等节点属性，将插值与data绑定
针对检测到的不同属性，比如在input中检测到v-model，那么会给input元素添加input事件监听
检测到v-bind，会发布一个订阅消息给watcher，最终绑定到data上
检测到v-for，会添加遍历方法等
最后会把检测到的Vue自定义的节点属性都移除
beforeMount
在挂载开始之前被调用，相关的render函数首次被调用，在这个时候还不能访问DOM节点，此时我们的$el为虚拟的dom节点，在节点中的数据依然是{{data}}的形式
mounted
el被新创建的vm.$el替换，并挂载到实例上去之后调用该函数，在这个时候可以访问DOM节点了，节点中的数据渲染完成
beforeUpdate
数据更新时调用，发生在虚拟DOM重新渲染和补丁之前，我们可以在这个钩子中进一步更改状态，这不会触发附加的重渲染过程
页面上的数据，比如input/select等数据有变动，会触发这个元素上被绑定的监听事件，将这个读取的请求发布给watcher,wetcher在触发data/computed中的setter，从而改变Vue实例上的属性值
updated
由于数据更改导致的虚拟的DOM重新渲染和打补丁，在这之后会调用该钩子，当这个钩子被调用时，组件DOM已经更新，所以在该函数内部可以执行依赖于DOM的操作
节点元素渲染完毕/属性值修改完毕
activated
keep-alive组件激活时调用
deactivated
keep-alive组件停用时调用
beforeDestroy
实例销毁之前调用，在这一步时，我们仍然可以使用实例
destroyed
vue实例销毁后调用，调用后，vue实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
<body>
<div id="box">
{{msg}}
<button @click="destroy">destroy</button>
</div>
<script>
new Vue({
data: {
msg: "vue实例"
},
methods: {
destroy() {
this.$destroy() //shoudongjava
}
},
beforeCreate() {
console.log("%c%s", "color:red", "实例初始化");
console.log(this.$data, "实例数据");
console.log(this.destroy, "实例方法");
console.log(this.$el, "实例挂载");
debugger;
},
created() {
console.log("%c%s", "color:red", "实例创建完成");
console.log(this.$data, "实例数据");
console.log(this.destroy, "实例方法");
console.log(this.$el, "实例挂载");
debugger;
},
beforeMount() {
console.log("%c%s", "color:red", "实例挂载之前");
console.log(this.$data, "实例数据");
console.log(this.destroy, "实例方法");
console.log(this.$el, "实例挂载");
debugger;
},
mounted() {
console.log("%c%s", "color:red", "实例挂载完成");
console.log(this.$data, "实例数据");
console.log(this.destroy, "实例方法");
console.log(this.$el, "实例挂载");
debugger;
},
beforeDestroy() {
console.log("%c%s", "color:red", "实例销毁之前");
console.log(this.$data, "实例数据");
console.log(this.destroy, "实例方法");
console.log(this.$el, "实例挂载");
},
destroyed() {
console.log("%c%s", "color:red", "实例销毁之后");
console.log(this.$data, "实例数据");
console.log(this.destroy, "实例方法");
console.log(this.$el, "实例挂载");
}
}).$mount("#box")
</script>
</body>
网友评论