2020-09-01 Vue 組件生命周期

組件生命周期

一個組件從創(chuàng)建到到最后銷毀的整個過程

生命周期圖示

四大階段
1. 初始化
  - beforeCreate() 不常用無法調用data以及調用methods
  - created() 已經初始化完成埃元，完成對于 data數(shù)據(jù)的監(jiān)聽勘天，在這里可以操作data和methods缸濒。使用場景：一般在這里調用組件初始化數(shù)據(jù)的請求函數(shù)
1. 編譯階段妇拯，視圖渲染掛載
  - beforeMount() 沒啥用
  - mounted() 在這里可以獲取當前組件的生成dom。比如：各種庫（渲染元素脓钾、swiper售睹、better-scroll、ehcarts可训、富文本編輯器...）
1. 數(shù)據(jù)更新昌妹，視圖刷新
  - beforeUpdate()
  - updated() 獲取更新后的dom
1. 銷毀，卸載
  - beforeDestroy() 在這里應該清除全局事件綁定握截，以及定時器
  - destroyed() 實例已經銷毀

組件飞崖、實例生命周期 是指一個組件從創(chuàng)建到銷毀的整個過程，vue提供了 不同時期的生命周期的鉤子函數(shù)川蒙，來監(jiān)控不同的生命周期過程蚜厉，在這些鉤子函數(shù)中，可以做不同的操作
beforeCreate 實例初始化之前
created 實例已經初始化  在這里可以使用data和methods的方法了畜眨，一般在這個生命周期內，調用獲取數(shù)據(jù)的ajax函數(shù)
beforeMount 視圖渲染之前
mounted 視圖已經渲染术瓮，在這里獲取獲取渲染后dom康聂，可以做一些 特效（綁定一些全局的事件..）
beforeUpdate 數(shù)據(jù)更新 視圖重新渲染之前
updated 數(shù)據(jù)更新 視圖 渲染之后 在這里可以獲取 更新后最新的dom
activated  組件激活
deactivated 組件 停止使用
beforeDestroy  實例銷毀之前  在這里可以清楚定時器 銷毀 全局事件如滾動
destroyed 實例銷毀之后
errorCaptured  捕獲錯誤鉤子

注意：
activated
deactivated
當一個組件 通過 keepalive組件緩存 之后，所有的生命周期都不會重新調用胞四，原因組件被緩存了沒有真正的銷毀恬汁。
activated 組件再一次使用時，會調用 讓緩存的組件 局部刷新（調用局部刷新 數(shù)據(jù)的 請求函數(shù)）
deactivated 組件 停止使用時會調用 （清除定時器 銷毀全局的事件）

組件生命周期鉤子函數(shù)

<body>
  <div id="app">
    <button @click="isShow = !isShow">{{ isShow?"隱藏":'顯示' }}</button>
    <home v-if="isShow"></home>
  </div>
  <template id="home">
    <div>
      <h3>Home</h3>
      <button @click="add">add</button>
      <ul ref="oul">
        <li v-for="item in arr" :key="item">
          {{ item }}
        </li>
      </ul>
    </div>
  </template>
</body>
<script src="./js/vue.js"></script>
<script>

  //定義一個子組件
  let Home = {
    template:'#home',
    data(){
      return {
        arr:[1,2,3,4,5],
        timer:null
      }
    },
    methods:{
      add(){
        this.arr.push(this.arr.length+1);
      }
    },
    //鉤子函數(shù)
    beforeCreate(){
      //初始化之前
      console.log('初始化之前');
    },
    created(){
      //初始化已經完成辜伟，這里可以調用data以及methods的方法
      console.log('初始化已經完成');
    },
    beforeMount(){
      //編譯之前
      console.log('編譯之前');
    },
    mounted(){
      //編譯完成氓侧，可以獲取dom當前組件  例如各種庫（swiper，ehcarts等）
      console.log('編譯完成');

      //定義一些全局的函數(shù)
      window.onscroll = function(){
        console.log('滾動事件觸發(fā)');
      },

      this.timer = setInterval(()=>{
        console.log('定時器觸發(fā)了');
      },1000)
    },

    beforeUpdata(){
      //數(shù)據(jù)更新了导狡，視圖刷新之前
      console.log('數(shù)據(jù)更新了约巷，視圖刷新之前');
    },
    updated(){
      //數(shù)據(jù)更新，試圖已經刷新完成
      console.log('數(shù)據(jù)更新旱捧，試圖已經刷新完成');
    },
    beforeDestroy(){
      //銷毀之前執(zhí)行独郎，可以在組件銷毀的同時清除定時器或者銷毀全局事件等
      console.log('銷毀之前執(zhí)行');

      //清除銷毀一些全局的事件
      window.onscroll = null;
      clearInterval(this.timer);
    },
    destroyed(){
      //銷毀完成
      console.log('銷毀完成');
    }
  }

  // 注冊成全局組件
  Vue.component('Home',Home)

  let vm = new Vue({
    el:'#app',
    data:{
      isShow:true
    },
  })
</script>

keep-alive

包裹其他組件，緩存其他組件,不會被銷毀枚赡，只存在激活和停用
1. activated()
  被keep-alive組件包裹的組件氓癌，在激活時觸發(fā)
1. deactivated()
  被keep-alive組件包裹的組件，在停用時時觸發(fā)

<body>
  <div id="app">
    <button @click="isShow = !isShow">{{ isShow?'隱藏':'顯示' }}</button>
    <keep-alive>
      <home v-if="isShow"></home>
    </keep-alive>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  let Home = {
    template:`
      <div>
        <h4>home頁</h4>  
          <input v-model="msg"/>
        </ul>
      </div>
    `,
    data(){
      return {
        msg:''
      }
    },
    methods:{
      fetchData(){
        console.log("數(shù)據(jù)過來了")
      }
    },
    beforeCreate(){
      console.log("初始化之前")
    },
    activated(){
      console.log("我再一次激活了");
      this.fetchData();
    },
    deactivated(){
      console.log('我被停用了');
      //  定時定時器和全局的事件 
    },
    created(){
      this.fetchData();
      console.log("初始化已經完成贫橙，在這里可以調用data了可以調用methods中的方法了")
    },
    beforeMount(){
      console.log("編譯之前")
    },
    mounted(){
      console.log("編譯已經完成了贪婉，在這里可以獲取dom");

    },
    beforeUpdate(){
      console.log('數(shù)據(jù)更新了，視圖刷新之前');
      
    },
    updated(){
      console.log("數(shù)據(jù)更新卢肃，視圖已經刷新完成了");
    
    },
    beforeDestroy(){
      console.log("銷毀之前");
    },
    destroyed(){
      console.log("組件已經銷毀")
    }
  }

  Vue.component('Home',Home)
  let vm = new Vue({
    el:"#app",
    data:{
      isShow:true
    }
  })
</script>