生命周期

生命周期

1. 什么是生命周期？
   vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（ 这些方法具备一些功能），我们给这些方法起了个名字叫做（ 生命周期钩子函数/ 组件钩子 ）

2. 为什么要学习生命周期？
   因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途

3. 这个生命周期是谁的生命周期？
   组件

4. 项目中生命周期如何书写（ 功能 ）
   Vue的生命周期分为三个阶段，分别为： 初始化，运行中， 销毁，一共8个钩子函数
   注意： 生命周期钩子函数不允许写成箭头函数

   html:
       <div id="app">
           <Hello></Hello>
       </div>
       <template id="hello">
           <div>
           <p> {{ msg }} </p>
           </div>
       </template>
   

   初始化：

   • beforeCreate

     1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
     2. 数据没有获得，真实dom也没有渲染出来
     3. 可以进行数据请求，提供了一次数据修改的机会
     4. 执行一次

   • created （数据请求最好放在这里；动态数据渲染时也可以放在这里，使用异步）

     1. 组件创建结束
     2. 数据得到了，真实dom没有渲染出来
     3. 可以进行数据请求，提供了一次数据修改的机会
     4. 执行了一次

   • beforeMount

     1. 组件挂载前

     2. 任务： 判断el 判断 template

        如果el没有，那么我们需要手动挂载，如果有，那么判断template

        如果template有，那么进行render函数

        如果template没有，那么通过 outerHTML 手动书写模板

     3. 数据可以获得，但是真实dom还没有渲染

     4. 可以进行数据请求，也提供了一次数据修改的机会

     5. 执行一次

   • mounted

     1. 组件挂载结束
     2. 数据获得了，真实dom也获得了
     3. 可以进行数据请求，也就可以修改数据
     4. 执行了一次
     5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）静态数据 第三方库的实例化要求，必须真实dom已经存在

   • 个人推荐：

     1. 数据请求一般写在created里面
     2. 第三方库实例化我们一般会往mounted中写

   运行中：

   • 触发条件：数据更新

   • beforeUpdate

     1. 更新前
     2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
     3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
     4. 可以触发多次

   • updated

     1. 更新结束
     2. 真实dom得到了，数据也得到了（ 更新后的 ）
     3. 动态数据获取（ 第三方库实例化 ）动态数据 第三方库的实例化要求，必须真实dom已经存在
     • 问题： 将动态数据的第三方库实例化放在updated中是有弊端的，弊端是第三方库会重复实例化
     • 解决：
     1. 加判断条件 if( this.mySwiper ) return false
     2. 将实例化放到异步队列中去

        • 将实例化放在created的数据请求中，然后放在setTimeout中

        • vue提供了一个它认为是最好的方案： nextTick
          使用： Vue.nextTick this.$nextTick
          nextTick表示组件渲染结束之后这个方法才会调用

        • 最优解决方案： nextTick

   销毁：

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

     • beforeDestroy

     • destroyed

   注： 这两个钩子功能一致的，这两个钩子没有太大的区别

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

   配置项写在生命周期钩子函数的上

   对比： 内部销毁 vs 外部销毁

   • 外部销毁不仅能销毁组件，也能销毁该组件的dom结构
   • 内部销毁只能销毁组件，不能销毁组件的dom结构
   • 内部销毁：将销毁函数写在组件内；

     html:
     
     <div id="app">
         <button @click = "flag = !flag"> 切换 </button>
         <Hello v-if = "flag"></Hello>
     </div>
     <template id="hello">
         <div>
         hello
         </div>
     </template>
     

     javascript:
     
         Vue.component('Hello',{
             template: '#hello',
             mounted () {
             this.time = setInterval ( () => {
                 console.log( '1903' )
             },1000)
             },
             beforeDestroy () {
             console.log('beforeDestroy')
             clearInterval( this.time )
             },
             destroyed () {
             console.log('destroyed')
             }
         })
         new Vue({
             el: '#app',
             data: {
             flag: true
             }
         })
     

   • 外部销毁：将销毁函数写在实例内

   html:
   
       <div id="app">
           <button @click = "flag = !flag"> 切换 </button>
           <Hello v-if = "flag"></Hello>
       </div>
       <template id="hello">
           <div>
           hello
           </div>
       </template>
   

   javascript:
   
       Vue.component('Hello',{
       template: '#hello',
       mounted () {
       this.time = setInterval ( () => {
           console.log( '1903' )
       },1000)
       },
       beforeDestroy () {
       console.log('beforeDestroy')
       clearInterval( this.time )
       },
       destroyed () {
       console.log('destroyed')
       }
   })
   new Vue({
       el: '#app',
       data: {
       flag: true
       }
   })