vue生命周期分析

写在前面

vue的声明周期就是从vue的实例创建到vue实例销毁的一个过程。在不同的声明周期中我们可以执行一些操作&＃xff0c;下面简单介绍一下。

经历过程

首先是new Vue({})初始化实例的时候会初始化事件和声明周期&＃xff0c;初始化完成会调用声明周期钩子函数beforeCreate。 下一步才是注入和添加响应&＃xff0c;等完成后会调用created&＃xff0c;这个时候可以往data里面添加一些数据&＃xff0c;通常会在这个时候获取服务器数据。下一步是判断有没有挂载的元素el或模板 template&＃xff0c;然后会对挂载的元素或是模板进行编译&＃xff0c;编译完成会调用钩子函数beforeMount&＃xff0c;然后就会替换掉el&＃xff0c;此时触发beforeMount &＃xff0c;页面被替换之后就数据也会跟着显示出来&＃xff0c;但是页面渲染也是需要时间的&＃xff0c;并不是替换了DOM就能立马显示出来&＃xff0c;所以这个时候操作DOM一定要注意&＃xff0c;要保证DOM已经正确渲染&＃xff0c;我们可以通过加个定时器延迟20Ms再去操作DOM&＃xff0c;20Ms是页面刷新通常是20Ms&＃xff0c;当然vue也提供了一个方法nextTick也表示延迟执行&＃xff0c;但是我推荐使用定时器这种写法&＃xff0c;下一个步骤是要数据变更才会的钩子函数。vue中的数据是有响应的&＃xff0c;当数据更新会调用beforeUpdate&＃xff0c;然后重新渲染DOM后调用updated,最后是关于实例销毁的&＃xff0c;当执行vm.$destory()后会触发钩子函数beforeDestroy&＃xff0c;然后是取消事件监听&＃xff0c;不再有数据响应了&＃xff0c;卸载完成&＃xff0c;最后执行destroyed