vue——生命周期

1.钩子函数

目标：Vue 框架内置函数，随着组件的生命周期阶段，自动执行

分类: 4大阶段8个方法

---

2.初始化 

1. new Vue() – Vue实例化(组件也是一个小的Vue实例)

2. Init Events & Lifecycle – 初始化事件和生命周期函数

3. beforeCreate – 生命周期钩子函数被执行

4. Init injections&reactivity – Vue内部添加data和methods等

5. created – 生命周期钩子函数被执行, 实例创建

  

        能获取data, 不能获取真实DOM！！

6. 接下来是编译模板阶段 –开始分析

7. Has el option? – 是否有 el 选项 – 检查要 挂到哪里

     没有. 调用 $mount() 方法

     有, 继续检查template选项

     在main.js中 （有el）：

new Vue({
    el:"#app",   //vue实例编译后的模版挂载到index.html的id叫app的标签上
    render: h => h(App),
})

     在main.js中 （无el）：

new Vue({
    render: h => h(App),
}).$mount('#app')

在life.vue组件中检测初始化阶段：

<template>
  <div>
    <p>学习生命周期-看控制台打印</p>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello,vue",
    };
  },
  //一、初始化阶段
  //new Vue()后,vue内部给实例对象添加了一些属性和方法，data和methods初始化“之前”
  beforeCreate() {
    console.log("beforeCreate -- 执行");
    console.log(this.msg); //undefined
  },

  //data和methods初始化之后
  //能获取data 不能获取真实的dom
  //场景：网络请求、注册全局事件
  created() {
    console.log("created--执行");
    console.log(this.msg); //hello,vue
  },
};
</script>

<style>
</style>

---

3.挂载

1. template选项检查

        有 - 编译template返回render渲染函数

       无 – 编译el选项对应标签作为template(要渲染的模板)

2. 虚拟DOM挂载成真实DOM之前

3. beforeMount – 生命周期钩子函数被执行

4. Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5. 真实DOM挂载完毕

6. mounted – 生命周期钩子函数被执行

 在life.vue组件中检测挂载阶段：

// 二. 挂载
  // 真实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
  },

---

4.更新

1. 当data里数据改变, 更新DOM之前

2. beforeUpdate – 生命周期钩子函数被执行

3. Virtual DOM…… – 虚拟DOM重新渲染, 打补丁 到真实DOM

4. updated – 生命周期钩子函数被执行

5. 当有data数据改变 – 重复这个循环

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

data() {
    return {
      msg: "hello, Vue",
      arr: [5, 8, 2, 1],
    };
},
 // 三. 更新
  // 前提: 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
  },

---

5.销毁

1. 当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2. beforeDestroy – 生命周期钩子函数被执行

3. 拆卸数据监视器、子组件和事件侦听器

4. 实例销毁后, 最后触发一个钩子函数

5. destroyed – 生命周期钩子函数被执行

  在life.vue组件中检测销毁阶段： 

data() {
    return {
      msg: "hello, Vue",
      arr: [5, 8, 2, 1],
      timer: null, // 保存计时器
    };
},  

created() {
    // console.log("created -- 执行");
    // console.log(this.msg); // hello, Vue
    this.timer = setInterval(() => {
        console.log("哈哈哈");
    }, 1000)
},

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

  在app.vue组件中检测销毁阶段： 

<template>
  <div>
    <h1>1.生命周期</h1>
    <Life v-if="show"></Life>
    <button @click="show = false">销毁组件</button>
  </div>
</template>

<script>
import Life from "./components/Life.vue";
export default {
  data() {
    return {
      show: true,
    };
  },
  //1.组件注册
  components: {
    Life,
  },
};
</script>

<style>
</style>