vue生命周期

Vue 的生命周期

1. 什么是生命周期？

​ vue的生命周期是组件从创建到销毁的一个过程，这个过程中，我们在每个特定的阶段会触发一些方法，这些方法有协议功能。我们把这些方法叫生命周期钩子函数 or 组件钩子

2. 为什么学习生命周期？

​ 因为我们要想在生命周期钩子中实现项目功能，那么必须知道每一个生命周期钩子的具体功能。

3. 这个声明周期是谁的声明周期？

​ 生命周期指的是组件的生命周期

4. vue 生命周期 分为 三个 阶段

​ Vue 生命周期分为 初始化， 运行中 销毁 三个阶段 8个钩子函数

​ 声明周期钩子函数不能使用箭头函数来定义，因为所有的生命周期钩子自动绑定 this 上下文到实例中，而箭头函数可能影响 this 的指向。

1.始化化阶段：

1. beforeCreate

​ 组件创建前，目的是为了组件的生命周期 和 组件中的事件 做准备。

​ 数据没有获得，真实 dom 也没有渲染出来的

​ 可以做数据请求，提供一次数据修改的机会

2. created

​ 组件创建结束

​ 数据得到了，真实 dom 没有渲染出来

​ 可以做数据请求，提供一次数据修改的机会

3. beforeMount

​ 组件挂载前， （挂载：把VDOM渲染到页面）

​ 任务： 判断 el 判断 template

​ 如果 el 没有，我们需要手动挂载，如果有判断 template, 如果存在，进行 render 函数（jsx =》 虚拟DOM）,

如果没有 template， 通过 outHTML 手动书写模板。

4. mounted

​ 1. 组件挂载结束

​ 2. 数据有了，VDOM 渲染出了真实DOM

​ 3.可以数据请求，修改数据

​ 有了真实DOM，一般用于静态的第三方库的实例化

初始化阶段总结：

1. 数据请求一般写在 created 里面, 因为这时候刚好能得到数据
2. 第三方实例化 一般写在 mounted 中，因为 mounted 能够获得真实 DOM

2. 运行中阶段

​ 触发条件：数据发生改变才触发，可以触发多次

1. beforeUpdata

1. 更新前

   任务：重新渲染 VDOM, 然后通过 dif 算法比较两次VDOM, 生成 path 补丁对象

2. update

1. 更新结束
2. 更新后的数据和真实的DOM得到了
3. 一般进行动态数据获取 （可以进行第三方库实例化）

3. 销毁阶段

​ 触发条件： 当组件销毁时触发

1. beforeDestroy

2. destroyed

两个钩子功能是一致，没什么区别，作用是做善后的，比如组件销毁后，清除组件的定时器，删除第三方实例

3. vue 的销毁有两种形式

1. 外部销毁——通过开关的方式

    外部销毁不仅能销毁组件，也能销毁该组件的 DOM 结构

   ```vue
   

       点击  //改变数据，创建和销毁组件
         //使用  v-if 根据数据创建销毁
    
    
   ```

2. 内部销毁——通过调用 $destroy 方法 

    内部销毁只能销毁组件， 当不能销毁组件的DOM结构。

   ```javascript
   
       

           销毁   //调用方法销毁组件
       
   
   Vue.component('Hello',{
      template: '#hello',
      methods:{
       clear() {             
         this.$destroy();  //通过 $destroy() 方法销毁组件
       }
     }，
       mouted() {
            this.time = setInterval( () => {   //给组件添加定时器
              console.log('18094')
            })
          },
          beforeDestroy() {               //组件销毁后， beforeDestroy() destroyed() 都会执行
            console.log('beforeDestroy');
            clearInterval( this.time )     //组件销毁后，清除组件的计时器
            document.querySelector('#app').remove();  //手动删除
          },
          destroyed () {
            console.log('destroyed');
          }
   ```



   静态数据第三方库实例化，写在 mouted  中

   动态数据第三方库实例化，写在 update   中

   优化问题：

   ​	将动态数据的第三库实例化放在 update 中是由弊端的，弊端是数据改变时，update 函数会多次触发，第三方库会重复实例化，造成性能浪费。

   解决：

    1.  判断实例是否存在，存在则不实例化  if( this.mySwiper) return false

       - 弊端： 多个实例化判断可能会相互影响

   	2.   将实例化放在异步队列中

        	1.   将实例化使用 setTimeout 加入异步队列， 放在 created 钩子的数据请求中。

        	2.   nextTick: 表示组件渲染结束后，nextTick（）才会执行。

             使用 Vue.nextTick(回调)  this.$nextTick()

   总结：

   ```
   静态数据第三方库实例化，写在 mouted  中
   
   动态数据第三方库实例化，用异步的方式，写在 created 函数中
   ```