vue声明周期分析

写在前面

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

经历过程

首先是

new Vue({})

初始化实例的时候会初始化事件和声明周期，初始化完成会调用声明周期钩子函数

beforeCreate

。 下一步才是注入和添加响应，等完成后会调用

created

，这个时候可以往data里面添加一些数据，通常会在这个时候获取服务器数据。下一步是判断有没有挂载的元素

el

或模板

template

，然后会对挂载的元素或是模板进行编译，编译完成会调用钩子函数

beforeMount

，然后就会替换掉

el

，此时触发

beforeMount

，页面被替换之后就数据也会跟着显示出来，但是页面渲染也是需要时间的，并不是替换了DOM就能立马显示出来，所以这个时候操作DOM一定要注意，要保证DOM已经正确渲染，我们可以通过加个定时器延迟20Ms再去操作DOM，20Ms是页面刷新通常是20Ms，当然vue也提供了一个方法

nextTick

也表示延迟执行，但是我推荐使用定时器这种写法，下一个步骤是要数据变更才会的钩子函数。vue中的数据是有响应的，当数据更新会调用

beforeUpdate

，然后重新渲染DOM后调用

updated

,最后是关于实例销毁的，当执行

vm.$destory()

后会触发钩子函数

beforeDestroy

，然后是取消事件监听，不再有数据响应了，卸载完成，最后执行

destroyed