VUE实例的生命周期

VUE实例的生命周期主要有创建、挂载、更新、销毁四个阶段
每个阶段有两个生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

---

beforeCreate

在实例初始化完成、props 解析之后调用，但此时data、computed属性还未处理，即data和computed中的数据还未被vue实例代理，还不具备响应性

created

在data、computed、methods、watch属性被处理后调用，此时数据已经具备响应性。但此时还未挂载到DOM树中，$el属性不可用

  接下来，vue会通过配置对象中的el属性获取挂载节点准备挂载，如果没有el属性，则通过vm.$mount(el)获取
  之后，vue会获取模板项，编译模板，准备渲染函数，如果没有模板项，则将el属性对应挂载节点的外层HTML编译为模板

beforeMount

在组件明确挂载节点、模板编译完成、响应式状态设置完成后调用，但还没有根据以上信息创建出真实DOM节点并挂载到HTML中

mounted

在组件创建真实DOM节点并挂载到HTML中后调用，此时页面已经被完整渲染出来。通常在这一生命周期钩子中进行开启定时器、发送网络请求、绑定自定义事件、订阅消息等初始化操作

beforeUpdate

在组件因为响应式状态改变而更新其DOM树前调用，此时页面还是旧的DOM节点，数据还未同步到页面上

  在更新页面的DOM节点前，vue会比较状态变更后生成的新虚拟DOM节点与旧虚拟DOM节点，以尽量少的替换页面真实DOM节点，减少重复渲染，提高效率

updated

在组件因为响应式状态改变而更新其DOM树后调用，此时页面显示与数据同步
注意：

• 父组件的updated方法在子组件的updated方法后调用
• 不能在updated方法中更改组件状态，可能会触发beforeUpdate方法导致更新死循环

beforeDestroy

在组件销毁前调用，通常在这一生命周期钩子中进行关闭定时器、解除自定义事件、取消订阅消息等收尾操作