Vue3中生命周期函数详解

学习目标：

本篇文章主要带领大家了解Vue3中钩子函数和Vue2中钩子函数的区别，Vue3中新增的一些钩子函数，开发环境专用钩子函数有哪些，错误捕捉钩子函数，相关钩子函数中参数解析和相关代码示例

学习内容：

1. setup函数作用
2. onBeforeUnmount钩子函数
3. 开发环境钩子函数onRenderTracked和onRenderTriggered
4. 错误捕捉钩子函数onErrorCaptured
5. KeepAlive缓存对应的钩子函数

正文：

• setup()函数
  setup()函数可以理解对应Vue2中的beforeCreate和created这两个钩子函数。我们创建的组件中用到的数据、方法、计算属性等都需要在setup中进行配置并通过return返回才可以在模板和组件实例中使用。

	export default {
   
	  setup() {
   
	    const name = ref("www.sunflowersoft.cn");
	    function sayHello() {
   
	      console.log("hi" + name.value);
	    }
	    return {
   
	      name,
	      sayHello,
	    };
	  },
	};                         

如果我们是在单文件组件中使用，我们可以直接使用setup的语法糖进行编写，这种方式更为简单一些。

语法如下：

<script setup lang="ts">
import {
   
  ref,
  watch,
  reactive,
  onBeforeUpdate,
  onRenderTracked,
  onErrorCaptured,
} from "vue";

const name=ref("busuanzi");
const obj=reactive({
   a:1,b:2})

</script>

• onBeforeMount()
  onBeforeMount()钩子函数会在组件被渲染之前被调用，当这个钩子被调用时，组件已经完成了其响应式状态的配置，我们可以在这个组件中操作data、prop、方法、计算属性等等，但是虚拟节点还没有插入父容器中，所以不能操作DOM元素。

<script setup="">
   import {
    ref, onBeforeMount } from 'vue'