先来看下官方文档的解释：每个vue实例在被创建时都要经过一系列的初始化过程。例如：数据、事件的监听、编译模板，同时在这个过程中，vue会在其中添加一些函数、运行，这些函数叫做生命周期钩子函数。3
这里我分了三个阶段说下都有哪一些钩子函数：
阶段一：Vue实例创建阶段的生命周期函数
beforeCreate：
Vue实例在内存中刚被创建，数据对象（data）和方法（methods）未初始化；
created：
实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还是没有内容；（此时访问this.$el 和this.$refs.xxx都是undefined）
beforeMount：
找到对应的template模板，编译成render函数，转换成虚拟dom，此时模板已经编译完成，数据未挂载到页面，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面中；
补充：
render : h=>h(App)
在beforeMounte之后和mounted之前，还有渲染render函数，它的作用是把模板渲染成虚拟dom。。。
mounted：
模板编译好了，虚拟dom渲染成真正的dom标签，数据渲染到页面，此时Vue实例已经创建完毕，如果没有其他操作的话，Vue实例会静静的躺在内存中，一动不动。。。一般会在mounted中来渲染从后端获取的数据！！！！！(页面初始化时，如果有操作dom的事件一般也会放在mounted钩子函数中，当然，你也 可以放在create中，前提需使用this.$nextTick(function(){})，在回调函数中操作dom。)
先来一个关于$nextTick(fn)的小例子：
<script>
//下边打印结果顺序： 1 2 3 11
let vm = new Vue({
el:"#app",
data:{
name:"lxc"
},
beforeCreate(){
},
created(){
console.log("1")
this.$nextTick(function(){
console.log("11")
})
},
beforeMount(){
console.log("2")
},
mounted(){
console.log("3")
}
})
</script>
上边代码充分说明了$nextTick()是在页面渲染完之后执行的一个异步方法。
总结下$nextTick使用场景：
第一：上边已经说了在created中操作dom；
第二：在数据变化后要执行某个操作，而这个操作需要随数据改变进而改变了dom时的操作，这个操作应该放入$nextTick中。
eg：
<div id="app">
<p ref="op" v-for="i in num" v-if="num > 0">{{i}}</p>
<button @click="oclick">click</button>
</div>
<script>
//p标签文本是动态渲染出来的，下边如果想操作p标签文本，需把操作写在$nextTick中
let vm = new Vue({
el:"#app",
data:{
num:0
},
methods:{
oclick(){
this.num = 4
this.$nextTick(function(){
this.$refs.op.forEach(ele=>ele.innerText=ele.innerText*2)
})
}
}
})
</script>
阶段二：Vue实例运行阶段的生命周期函数
beforeUpdate：数据依赖改变或者用$forceUpdata强制刷新时，对象data中的数据已经更改（虚拟dom已经重新渲染），但是，页面中的值还是原来，未改变，因为此时还未开始渲染dom；
update：此时data中的数据和页面更新完毕，页面已经被重新渲染。。。
在实际开发中，一般会用watch来代替上边2个方法，因为watch会知道是哪一个数据变化。。。
阶段三：Vue实例销毁阶段的生命周期函数
beforeDestroy：实例销毁前掉用，在此刻实例还是可用的
destroyed：Vue实例被销毁，观察者、子组件、事件监听被清除（页面数据不会消失，只不过是响应式无效了）。。。
总结下：以上三个阶段就是Vue实例的一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载dom、渲染、更新渲染、销毁一系列过程，成为vue生命周期。。。
下边还是借助vue官方文档中生命周期图在通一遍：
/
网友评论