vue生命周期

vue生命周期学习

<template>
  <div>
    <p>学习生命周期--看控制台打印</p>
    <p id="myP">{{ msg }}</p>
    <ul id="myUL"> 
      <li v-for="(val,index) in arr" :key="index">
        {{ val }}
      </li>
    </ul>
    <button @click="arr.push(1000)" v-if="show">点击末尾加值</button>
    <button @click="show = false">销毁组件</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      show :true,
      msg: "Hello Vue!",
      arr:[5,7,32,1,24]
    }
  },
  //1,初始化
  // new Vue()以后,vue内部给实例对象添加一写属性和方法,data和methods初始化之前
  beforeCreate() {
    console.log("beforeCreate----执行");
    console.log(this.msg);
  },
  //data和method初始化后,
  //场景:网络请求,注册全局事件
  created() {
    console.log("created --- 执行");
    console.log(this.msg);

    this.timer = setInterval(() => {
      console.log("哈哈哈");
    }, 1000)
  },
  // 二,挂载
  // 真实DOM挂载之前 
  // 场景:预处理data,不会触发updataed钩子函数
  beforeMount () {
      console.log("beforeMount----执行");
      console.log(document.getElementById("myP"));//null
      this.msg = "重新值"
  },
  //真实DOM挂载以后
  //场景:挂载后真实DOm
  mounted(){
    console.log("mounted --- 执行");
    console.log(document.getElementById("myP"));
  },
  //更新之前
  beforeUpdate () {
      console.log("beforeUpdate -- 执行");
      console.log(document.querySelectorAll("#myUL>li")[5]);
  },
  //更新之后
  //场景:获取更新后的真实DOM
  updated () {
      console.log("updated ---- 执行");
      console.log(document.querySelectorAll("#myUL>li")[5]);//li
  },
  //四销毁
    //前体,v-if="false" 销毁vue实例
    // 场景,移除全局事件,移除当前组件,计时器,定时器,eventBus移除实践,$off方法
    beforeDestroy () {
        console.log("beforeDestroy -- 执行");
        clearInterval(this.timer)
    },
    destroyed(){
        console.log("destroyed --- 执行");
    }

}
</script>

<style>
</style>