VUE-生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更 新 -> 渲染、卸载 等⼀系列过程，称为Vue的⽣命周期。

    Vue的钩子函数按照组件生命周期的过程分为，挂载阶段=>更新阶段=>销毁阶段。

每个阶段对应的钩子函数 

        挂载阶段：beforeCreate、created、beforeMounted、mounted

        更新阶段：beforeUpdate、updated

        销毁阶段：beforeDestroy、destroyed

每个阶段特点与适合做什么 ？

1. beforeCreate：数据观测和初始化事件还未开始，此时 data 的响应式追踪、 event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的⽅法和数据。

2. created：实例创建完成，实例上配置的 options 包括 data、computed、watch、 methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。发送数据请求的最早时期。

3. beforeMount：在挂载开始之前被调⽤，相关的render函数⾸次被调⽤。实例已完成以 下的配置：编译模板，把data⾥⾯的数据和模板⽣成html。此时还没有挂载html到⻚⾯上。

4. mounted：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调⽤。实例已完成以 下的配置：⽤上⾯编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html ⻚ ⾯中。此过程中进⾏ajax交互。

5. beforeUpdate：响应式数据更新时调⽤，此时虽然响应式数据更新了，但是对应的真实DOM 还没有被渲染。

6. updated：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调⽤。此时 DOM 已 经根据响应式数据的变化更新了。调⽤时，组件 DOM已经更新，所以可以执⾏依赖于DOM的操 作。然⽽在⼤多数情况下，应该避免在此期间更改状态，因为这可能会导致更新⽆限循环。该钩⼦ 在服务器端渲染期间不被调⽤。

7. beforeDestroy：实例销毁之前调⽤。这⼀步，实例仍然完全可⽤， this 仍能获取到实例。

8. destroyed：实例销毁后调⽤，调⽤后，Vue 实例指示的所有东⻄都会解绑定，所有的 事件监听器会被移除，所有的⼦实例也会被销毁。该钩⼦在服务端渲染期间不被调用

另外还有 keep-alive 独有的⽣命周期，分别为 activated 和 deactivated 。⽤ keep-alive 包裹的组件在切换时不会进⾏销毁，⽽是缓存到内存中并执⾏ deactivated 钩⼦函 数，命中缓存渲染后会执⾏ activated 钩⼦函数。

父子组件钩子函数在三个阶段的代码执行顺序

        挂载：父组件created> 子组件created > 子组件mounted> 父组件mounted

        更新：父组件beforeUpdate > 子组件beforeUpdated > 子组件updated > 父组件updated

         销毁：父组件beforeDestroy> 子组件beforeDestroy > 子组件destroyed> 父组件destroyed