vue生命周期

vue生命周期

Vue实例有一个完整的生命周期，也就是说开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称为Vue 实例的生命周期。

生命周期钩子，就是生命周期事件（函数）的别名而已。

主要的生命周期函数分类：

创建期间的声明函数：

1. beforeCreate
2. created
3. beforeMount
4. mounted

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data，computed等上的方法和数据。

created ( 创建后 ）

在实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化， 然而，挂载阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等。

在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件

1. el选项的有无对生命周期过程的影响
   有el选项，则继续编译过程
   没有el选项，则停止编译，也意味着暂时停止了生命周期，直到vm.$mount(el)

2. template参数选项的有无对生命周期的影响
   如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数
   如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高

   如果同时放在template和外部HTML中

    <div id="box