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

组件生命周期

一个组件从创建到到最后销毁的整个过程

生命周期图示

四大阶段
1. 初始化
  - beforeCreate() 不常用无法调用data以及调用methods
  - created() 已经初始化完成，完成对于 data数据的监听，在这里可以操作data和methods。使用场景：一般在这里调用组件初始化数据的请求函数
1. 编译阶段，视图渲染挂载
  - beforeMount() 没啥用
  - mounted() 在这里可以获取当前组件的生成dom。比如：各种库（渲染元素、swiper、better-scroll、ehcarts、富文本编辑器...）
1. 数据更新，视图刷新
  - beforeUpdate()
  - updated() 获取更新后的dom
1. 销毁，卸载
  - beforeDestroy() 在这里应该清除全局事件绑定，以及定时器
  - destroyed() 实例已经销毁

组件、实例生命周期 是指一个组件从创建到销毁的整个过程，vue提供了 不同时期的生命周期的钩子函数，来监控不同的生命周期过程，在这些钩子函数中，可以做不同的操作
beforeCreate 实例初始化之前
created 实例已经初始化  在这里可以使用data和methods的方法了，一般在这个生命周期内，调用获取数据的ajax函数
beforeMount 视图渲染之前
mounted 视图已经渲染，在这里获取获取渲染后dom，可以做一些 特效（绑定一些全局的事件..）
beforeUpdate 数据更新 视图重新渲染之前
updated 数据更新 视图 渲染之后 在这里可以获取 更新后最新的dom
activated  组件激活
deactivated 组件 停止使用
beforeDestroy  实例销毁之前  在这里可以清楚定时器 销毁 全局事件如滚动
destroyed 实例销毁之后
errorCaptured  捕获错误钩子

注意：
activated
deactivated
当一个组件 通过 keepalive组件缓存 之后，所有的生命周期都不会重新调用，原因组件被缓存了没有真正的销毁。
activated 组件再一次使用时，会调用 让缓存的组件 局部刷新（调用局部刷新 数据的 请求函数）
deactivated 组件 停止使用时会调用 （清除定时器 销毁全局的事件）

组件生命周期钩子函数

<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);
      }
    },
    //钩子函数
    beforeCreate(){
      //初始化之前
      console.log('初始化之前');
    },
    created(){
      //初始化已经完成，这里可以调用data以及methods的方法
      console.log('初始化已经完成');
    },
    beforeMount(){
      //编译之前
      console.log('编译之前');
    },
    mounted(){
      //编译完成，可以获取dom当前组件  例如各种库（swiper，ehcarts等）
      console.log('编译完成');

      //定义一些全局的函数
      window.onscroll = function(){
        console.log('滚动事件触发');
      },

      this.timer = setInterval(()=>{
        console.log('定时器触发了');
      },1000)
    },

    beforeUpdata(){
      //数据更新了，视图刷新之前
      console.log('数据更新了，视图刷新之前');
    },
    updated(){
      //数据更新，试图已经刷新完成
      console.log('数据更新，试图已经刷新完成');
    },
    beforeDestroy(){
      //销毁之前执行，可以在组件销毁的同时清除定时器或者销毁全局事件等
      console.log('销毁之前执行');

      //清除销毁一些全局的事件
      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组件包裹的组件，在激活时触发
1. deactivated()
  被keep-alive组件包裹的组件，在停用时时触发

<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("数据过来了")
      }
    },
    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('数据更新了，视图刷新之前');
      
    },
    updated(){
      console.log("数据更新，视图已经刷新完成了");
    
    },
    beforeDestroy(){
      console.log("销毁之前");
    },
    destroyed(){
      console.log("组件已经销毁")
    }
  }

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