vue生命周期函数

简介

生命周期函数也叫钩子函数，就是在某一条件下被自动触发的函数，它们和浏览器渲染过程挂钩。比如我想让某个网页一被加载出来就去向后端请求数据，不需要额外绑定一个监听事件，这个时候就可以使用生命周期函数。

vue3中更新了生命周期函数的使用方法：vue3官方文档

生命周期函数图示

下面演示了各个钩子函数的触发时间：

• beforeCreate：vue实例的挂载元素el和数据对象data还没有初始化，还是一个undefined的一个状态。

• created：这个时候Vue实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载dom

• beforeMount：在这里Vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟的dom节点。

• mounted：Vue实例已经挂载在真实的dom节点上了，可以对dom进行操作来获取dom节点。

• beforeUpdate：响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的dom，比如是手动移除已添加的时间监听器。

• updated：虚拟dom重新渲染和打补丁之后调用，组成新的dom已经更新，避免在这个钩子函数种操作数据，防止死循环。

• beforeDestory：Vue实例在销毁之前调用，在这里可以使用，通过this也能访问到实例，可以在这里对一些不用的定时器进行清除，解绑事件。

• destoryed：vue销毁之后调用，调用之后所有的事件监听都会被移除，所有的实例都会被销毁。

生命周期函数的使用

Vue3生命周期在调用前需要先进行引入:

import { reactive, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, } from "vue";

并且vue3的生命周期函数在使用的时候一定要在 setup()中执行。

比如我想在组件挂载之前和之后分别向控制台打印一段文字：

<script>
  //引入生命周期函数 onMounted
import  {onMounted, onBeforeMount}  from "vue";

export default {
  name: "theContent",
  setup() {
    onBeforeMount(()=>{
        alert("onBeforeMount");
    });
    onMounted(()=>{
        alert("onMounted");
    });
  },
};
</script>