学习目标：

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

学习内容：

setup函数作用
onBeforeUnmount钩子函数
开发环境钩子函数onRenderTracked和onRenderTriggered
错误捕捉钩子函数onErrorCaptured
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'  
   onBeforeMount(() => {
       //不可以访问DOM对象
   })
</script> 

<template>
    <div ref="el"></div>
</template>

onMounted() onMounted() 该钩子函数会在组件渲染到父容器中后执行。所谓的渲染完成是指：其所有同步子组件都已经被挂载，其自身的DOM树已经创建完成并插入了父容器中。在该函数中我们可以操作和获取DOM对象。

<script setup="">
    import { ref, onMounted } from 'vue' 
    const el = ref() 
    onMounted(() => {
        el.value // <div> 可以访问DOM对象
    })
</script> 

<template>
    <div ref="el"></div>
</template>

onBeforeUpdate() 当响应式数据被改动后，但是在该组件重新渲染之前，该钩子函数会被调用，所以我们在这个函数中拿到的DOM对象不是最新的，但是获取的响应式数据是最新的，可以在DOM更新之前做一些特殊逻辑的处理。

<script setup>
    import { ref, onBeforeUpdate } from 'vue'  
    const webName=ref('sunflowersoft')
    onBeforeUpdate(() => { 
        console.log(webName.value) //weixin 值已经变化但是DOM树操作的不是最新的。
    })
    webName.value='weixin'
</script> 

<template>
    <div ref="el"></div>
</template>

onUpdated() 在响应式数据变化后，DOM树重新完成了渲染后调用该函数，在这个函数中我们可以操作最新的DOM对象。

<script setup="">
    import { ref, onUpdated } from 'vue'  
    const webName2=ref('sunflowersoft')
    onUpdated(() => { 
         // 可以操作最新DOM
    })
    webName2.value='weixin';
 </script>

  <template>
      <div v-if="webName2=='weixin'">{{webName2}}</div>
  </template>

onBeforeUnmount() 在组件实例被摧毁之前调用，DOM对象，实例上的所有属性和方法都可以访问,我们可以在组件销毁之前在这个钩子函数中释放不需要的变量，清除定时器等等。
onUnmounted() 在组件实例被摧毁之后调用（事件监听被移除、数据绑定被卸载、DOM被销毁等等），其所有子组件都已经被卸载。

开发环境钩子函数

onRenderTracked() 当组件在渲染过程中追踪到响应式依赖时会被调用，我们可以通过这个钩子函数调试代码，查看响应式数据是否绑定成功，这个钩子函数仅在开发模式下可用。

        <script setup="">
	         import { ref,onRenderTracked } from "vue"; 
	         let text=ref("ref")
	         onRenderTracked((e) => {
	             console.log(e, "e");  //追踪到依赖会执行
	         }); 
         </script>

         <template>
             <main>
               <input type="text" v-model="text"> 
             </main>
         </template>

参数e是一个对象，对象包含的属性如下

{
    effect: ReactiveEffect
    target: object //响应式变量和函数
    type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
    key: any   //那个变量发生了变化
}

ononRenderTriggered() RenderTriggered()钩子函数当响应式依赖的变更触发了组件渲染时调用，这个钩子函数仅在开发模式下可用。

KeepAlive缓存钩子函数

onActivated() 若组件实例是缓存树的一部分，当组件被插入到DOM中时会调用该钩子函数。

 
  <!-- Button组件script部分 -->
  <script setup="">
    import { ref,onActivated } from "vue"; 
    let isTrue=ref(true)
    onActivated((e) => {
        console.log(e, "e"); //当该组件渲染的时候会执行该钩子函数
    }); 
   </script>

   <!-- Button组件 -->
   <template>
    <main>
        <template>
            <button class="btn-wrap">
              <div class="btn-content">
                <span> <slot>按钮</slot></span>
              </div>
            </button>
        </template>
    </main>
</template>


<!-- 父组件 -->
<template>
    <main>
        <keepalive>
            <button v-if="isTrue" type="success"></button>
        </keepalive>
    </main>
</template>

注意：该钩子函数是在子组件才可以触发。

onDeactivated() 若组件实例是缓存树的一部分，当组件从DOM中被移除时会调用该钩子函数。

onErrorCaptured()

onErrorCaptured()钩子函数在捕获了后代组件传递的错误时调用。

可以从以下来源中捕获错误：组件渲染过程中的错误，事件处理器，生命周期钩子，setup() 函数，侦听器，自定义指令钩子，过渡钩子。

回调函数有以下参数：

 function onErrorCaptured(callback: ErrorCapturedHook): void
 <!-- 定义类型 -->
 type ErrorCapturedHook = (
     err: unknown,
     instance: ComponentPublicInstance | null,
     info: string
 ) =&gt; boolean | void


 onErrorCaptured((error,instance,info)=&gt;{

 })

这三个实参代表：错误对象、触发该错误的组件实例，以及一个说明错误来源类型的信息字符串。

总结：

本篇文章介绍了Vue3中钩子函数的用法和使用场景，和Vue2中区别主要是Vue3中通过setup函数定义响应式数据和方法并返回给组件实例和模板使用，大部分的周期函数的用法是类似的，新增了开发环境调试代码的两个钩子函数，对开发者还是很友好的。错误捕捉钩子函数方便我们快速定位开发过程中出现的错误。

整体Vue3的钩子函数会更合理一些，具体大家还要在项目中多练习使用，就会更了解每个钩子函数触发的时间节点。

文章转载自：点击查看原文

Vue3中生命周期函数详解

学习目标：

学习内容：

正文：

开发环境钩子函数

KeepAlive缓存钩子函数

onErrorCaptured()

总结：