Vue 的生命周期钩子

先上个图

什么是生命周期？生命周期就是一个对象的生老病死。 Vue也有自己的生命周期，从Vue实例的创建、初始化、更新、销毁，在这个过程中间总是伴随着各种各样的事情，这些事情我们我们统称为生命周期。

在Vue的生命周期中有四个关键的时间点，在这几个关键的时间点发生的事件我们称之为 生命周期钩子（生命周期事件或生命周期函数

• 创建阶段的生命周期钩子

  • beforeCreate：实例刚刚在内存中被创建出来，此时 methods 和 data 还没有被初始化出来
  • created：实例已经在内存中创建OK，此时 data 和 methods 已经创建完成，还没有开始编译模板

• 编译阶段的生命周期钩子

  • beforeMount：此时模板已经在内存中编译完成，但是还没有挂载到页面中
  • mounted：此时内存中的模板已经真实的挂载到了页面指定的容器中，用户已经可以看到渲染好的页面

  

• 运行阶段的生命周期钩子

  • beforeUpdate：此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，界面还没有被重新渲染
  • updated：此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面被重新渲染！

  

• 销毁阶段的生命周期钩子

  • beforeDestroy：此时实例仍然完全可用
  • destroyed：此时实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

App.vue

<template>
  <div id="app">
    <Box v-if="flag === true" />
    <button @click="toggle">toggle</button>
  </div>
</template>

<script>
import Box from "./Box.vue";
export default {
  data() {
    return {
      flag: true,
    };
  },
  components: {
    Box,
  },
  methods: {
    toggle() {
      this.flag = !this.flag;
    },
  },
};
</script>

Box.vue

<template>
<div id="text">{{n}}</div>
</template>

<script>
export default {
    data() {
        return {
            n: 0,
        };
    },
    beforeDestroy() {
        console.log("beforeDestroy");
        console.log(this.n);
    },
    destroyed() {
        console.log("destroyed");
        console.log(this.n);
    },
};
</script>

效果如下：