Vue的生命周期

去年大致了解过Vuejs的一些特性，最近两天在细看。

Vue的生命周期，了解一下。

Vue的生命周期

通俗点讲，Vue实例从创建到销毁的过程称为Vue的生命周期。具体包括开始创建，初始化数据，编译模板，挂载DOM-->渲染，更新-->渲染，卸载等一系列过程。

在Vue的整个生命周期中，它提供了一些生命周期钩子（lifecyclehook），让我们可以执行自定义逻辑。

生命周期钩子（lifecyclehook）

（1）beforeCreate

        说明：实例创建前：这个阶段实例的data、method是读不到的。

（2）created

        说明：实例创建后：这个节点已经完成了数据观测，属性和方法的运算，watch/event事件回调。mount挂载阶段还没开始，$el属性目前不可见，数据并没有在DOM元素上进行渲染。

        应用：进行ajax请求异步数据的获取、初始化数据。

（3）beforeMount

        说明：在挂在开始之前被调用：相关的render函数首次被调用。

（4）mounted

        说明：el选项的DOM节点被新创建的vm.$el替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染。

        应用：挂载元素内DOM结点的获取。

（5）beforeUpdate

        说明：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命周期函数里进行状态处理。

（6）updated

        说明：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。当时李每次进行数据更新时updated都会执行。

        应用：任何数据的更新，如果要做统一的业务逻辑处理。

（7）beforeDestroy

        说明：实例销毁之前调用。

（8）destroyed

        说明：Vue实例销毁之后调用。调用后，Vue实例的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

另外，通常伴随着还有以下几个方法：

1）nextTick

        说明：针对单一事件更新数据后立即操作DOM

2）watch

        说明：监听具体数据变化，并做相应的处理