阅读 17

Vue 的生命周期钩子

先上个图

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

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

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

    • beforeCreate:实例刚刚在内存中被创建出来,此时 methodsdata 还没有被初始化出来
    • created:实例已经在内存中创建OK,此时 datamethods 已经创建完成,还没有开始编译模板

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

    • 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>
复制代码

效果如下:

文章分类
前端
文章标签