生命周期--钩子函数

异步请求在哪发？

        created、beforeMount、mounted。因为在这三个钩子函数中，data已经创建，可以将服务端返回的数据进行赋值。

        如果异步请求不依赖于DOM,推荐在created钩子函数中调用异步请求，在created钩子函数中调用异步请求有以下优点：

• 能更快获取服务端数据，减少loading时间
• ssr不支持beforeMount、mounted钩子函数，放在created具有一致性

<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)">点击末尾加值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello,Vue",
      arr: [5, 8, 2, 1],
      timer: null
    }
  },
  //一、初始化
  //new Vue()之后,data和methods初始化之前
  beforeCreate() {
    console.log('beforeCreate--执行');
    console.log(this.msg);
  },
  //data和methods初始化之后
  //用于网络请求，注册全局事件
  created() {
    console.log('created--执行');
    console.log(this.msg);
    // this.timer = setInterval(() => {
    //     console.log("哈哈哈");
    // }, 1000)
  },

  // 二、挂载
  // 真实DOM挂在之前
  // 场景：预处理data，不会触发updated钩子函数
  beforeMount() {
    console.log('beforeMount--执行');
    console.log(document.getElementById("myP"));  //null
    this.msg = "重新值"
  },
  // 真实DOM挂在之后, 可获取真实的DOM
  mounted() {
    console.log('mounted--执行');
    console.log(document.getElementById("myP"));  //p
  },

  // 三、更新
  // data数据改变才执行
  beforeUpdate() {
    console.log('beforeUpdate--执行');
    console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
  },
  // 更新之后
  // 场景: 获取更新后的真实DOM
  updated() {
    console.log("updated -- 执行");
    console.log(document.querySelectorAll("#myUL>li")[4]); // li
  },

  // 四. 销毁
  // 前提: v-if="false" 销毁Vue实例
  // 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
  beforeDestroy() {
    console.log('beforeDestroy -- 执行');
    clearInterval(this.timer)
  },
  destroyed() {
    console.log("destroyed -- 执行");
  }

}
</script>

<style>
</style>