Vue生命周期过程详解

生命周期 （ 王者 ）

1. 什么是生命周期？
   vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）
2. 为什么要学习生命周期？
   因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
3. 这个生命周期是谁的生命周期？
   组件
4. 项目中生命周期如何书写（ 功能 ）

生命周期过程

Vue的生命周期分为三个阶段，分别为： 初始化，运行中， 销毁，一共8个钩子函数
注意： 生命周期钩子函数不允许写成箭头函数

1. ------------------------初始化：---------------------------
   beforeCreate ------------ 相亲准备前（ 爸妈准备， 你根本是局外人 ）
   1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
   2. (组件中的)数据没有获得，真实dom也没有渲染出来
   3. 可以进行数据请求，提供了一次数据修改的机会(例如用fetch请求可以将组件中的数据修改)
   4. 执行一次

   created ------------ 爸妈告诉你了，这边有几个备选， 选一个吧
   1. 组件创建结束
   2. (组件中的)数据得到了，真实dom没有渲染出来
   3. 可以进行数据请求，提供了一次数据修改的机会(例如用fetch请求可以将组件中的数据修改)
   4. 执行了一次
   beforeMount ----------- 互相加一个微信，先聊天
   1. 组件挂载前
   2. 任务： 判断el 判断 template
   如果el没有，那么我们需要手动挂载，如果有，那么判断template
   如果template有，那么进行render函数
   如果template没有，那么通过 outerHTML 手动书写模板
   3. (组件中的)数据可以获得，但是真实dom还没有渲染
   4. 可以进行数据请求，也提供了一次数据修改的机会(例如用fetch请求可以将组件中的数据修改)
   5. 执行一次
   -------期间暗自内部进行render函数渲染
   mounted ------------ 见面
   1. 组件挂载结束
   2. (组件中的)数据获得了，真实dom也获得了
   3. 可以进行数据请求，也就可以修改数据(例如用fetch请求可以将组件中的数据修改)
   4. 执行了一次
   5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）

   综上总结：
   兵哥推荐：
   1. 数据请求一般写在created里面
   2. 第三方库实例化我们一般会往mounted中写

2. -------------------------- 运行中------------------------------
   触发条件：数据更新
   beforeUpdate
   1. 更新前
   2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
   3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
   4. 可以触发多次
   updated
   1. 更新结束
   2. 真实dom得到了，数据也得到了（ 更新后的 ）
   3. 动态数据获取（ 第三方库实例化 ）

3. -------------------- vue生命周期的销毁阶段 -------------------
   触发条件： 当组件销毁时：
   beforeDestroy
   destroyed

   • 如何实现
     配置项写在生命周期钩子函数的上

   • 统一讲两个钩子
     为什么？
     因为这两个钩子功能一致的，这两个钩子没有太大的区别

   • 作用：
     用来做善后的,比如计时器的关闭 第三方实例的删除

   • Vue的销毁有两种形式

     1. 通过开关的形式 - 外部销毁
     2. 通过调用 $destroy 方法 - 内部销毁

   • 对比： 内部销毁 vs 外部销毁
     外部销毁不仅能销毁组件，也能销毁该组件的dom结构
     内部销毁只能销毁组件，不能销毁组件的dom结构

         <div id="app">
           <Hello></Hello>
         </div>
         <template id="hello">
           <div class="hello-box">
             <button @click = "clear"> 销毁 </button>
             hello
           </div>
         </template>
     

           Vue.component('Hello',{
           template: '#hello',
           methods: {
             clear () {
               this.$destroy()               //通过调用$destroy方法配合
             }                               //beforeDestroy()和destroyed()实现组件销毁
           },
           mounted () {
             this.time = setInterval ( () => {
               console.log( '1903' )
             },1000)
           },
           beforeDestroy () {
             console.log('beforeDestroy')
             clearInterval( this.time )
             document.querySelector('.hello-box').remove()
           },
           destroyed () {
             console.log('destroyed')
           }
         })
         new Vue({
           el: '#app',
           data: {
             flag: true
           }
         })