Vue-生命周期函数

1.什么是生命周期？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期，通过vue的生命周期我们可以在不同的阶段进行实现不同的逻辑处理，也是vue框架的数据间的交互通信。其实现在看来也没那么难，但是vue的源码实现这一套机制那是难得一逼，涉及到复杂的算法如diff算法。

1.  
   new Vue({
2.  
   router,
3.  
   store,
4.  
   render: h => h(App)
5.  
   }).$mount('#app')
6.  
    
7.  
   new Vue({
8.  
   data:{},
9.  
   el: '#app' // 挂载点
10.  
    })

2.生命周期函数是什么？

vue的生命周期通常有8个，分别是创建前后，挂载前后，更新前后，销毁前后，分别对应的钩子函数有beforeCreate创建前，created创建后，beforeMount挂载前，moubted挂载后，beforeUpdate更新前，updated更新后，beforeDestory销毁前，destoyed销毁后.

页面一开始就会加载创建前后，挂载前后的钩子函数，而更新前后的钩子函数需要我们去改变data的时候才能触发，就比如一个点击按钮执行一个方法，这个方法给里面的data里的属性进行复制操作这个时候就会触发更新前后的钩子函数,销毁的钩子函数必须在得当的组件中进行切切换的时候就会进行销毁

3.生命周期有什么运行机制

每个生命周期的执行机制

创建前后：new Vue()

挂载前后：e.也是就是挂载dom

注意点：生命周期在创建之前才能够获取data数据；在挂在后才能获取dom元素

更新前后：监听的是更新试图或者说是dom元素

销毁前后：页面的定时器到一定的时间会进行销毁，切换页面时会触发销毁

3.1生命周期干什么事情

创建后：ajax操作；读取缓存操作

挂载后：也可以进行ajax操作；这里可以操作dom了

销毁后：页面有定时器，页面监听...的改销毁了

3.2页面和组件的生命周期执行顺序

页面---beforeCreate
mypage.vue?1dde:16 页面---created
mypage.vue?1dde:20 页面---beforeMount
mycom.vue?5e77:11 组件---beforeCreate
mycom.vue?5e77:14 组件---created
mycom.vue?5e77:18 组件---beforeMount
mycom.vue?5e77:22 组件---mounted
mypage.vue?1dde:24 页面---mounted

这篇好文章是转载于：学新通技术网