持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

生命周期

Vue3的生命周期大部分还是和Vue2一样，除了beforeCreate和created，这两个已经替换成setup了

选项API	Hook(setup)	作用
beforeCreate	不需要	在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用
created	不需要	在实例创建完成后被立即同步调用
beforeMount	onBeforeMount	在挂载开始前被调用，DOM尚未加载
mounted	onMounted	在实例挂载完成后被调用,DOM加载已完成
beforeUpdate	onBeforeUpdate	页面DOM更新前触发
updated	onUpdated	页面DOM更新完触发
beforeUnmount	onBeforeUnmount	在卸载组件之前触发
unmounted	onUnmounted	卸载组件之后触发
errorCaptured	onErrorCaptured	在捕获一个来自后代组件的错误是被触发，在vue2.5后出现
renderTracked	onRenderTracked	跟踪虚拟 DOM 重新渲染时调用，状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，当组件第一次渲染时，就会跟踪，然后生成一个event对象
renderTriggered	onRenderTriggered	当虚拟 DOM 重新渲染被触发时调用，状态触发，不会跟踪每一个值，而是给出变化之的信息

这些钩子中都应该在setup中编写

Vue3生命周期图示：

vue3生命周期.svg

官方API：v3.cn.vuejs.org/api/options…

对于mounted这类生命周期API与vue2中使用是类似的，不过在vue3中新增了onRenderTracked和onRenderTriggered。这两种只能在开发环境中调试使用。

实例：

<template>
    <div> {{ val }} </div>
    <button @click="change">渲染</button>
</template>

<script setup lang="ts">
    import { ref, reactive, 
    onMounted, onBeforeMount, onBeforeUpdate, onUpdated, 
    onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered} from "vue";
    let val = ref(1)
    function change():void {
        val.value = 1000
    }

    // 在 Dom 加载前触发
    onBeforeMount(() => {
        console.log('onBeforeMount')
    })
    // 在 Dom 加载完触发
    onMounted(() => {
        console.log('onMounted')
    })
    // 在页面更新前触发
    onBeforeUpdate(() => {
        console.log('onBeforeUpdate')
    })
    // 在页面更新完触发
    onUpdated(() => {
        console.log('onUpdated')
    })
    // 在组件销毁之前触发
    onBeforeUnmount(() => {
        console.log('onBeforeUnmount')
    })
        // 在组件销毁完成触发
    onUnmounted(() => {
        console.log('onUnmounted')
    })
    // 在每次渲染后收集响应式依赖
    onRenderTracked((event) => {
        console.log('onRenderTracked')
        console.log(event)
    })
    // 在每次触发页面重新渲染时自动执行
    onRenderTriggered(({key, target, type}) => {
        console.log('onRenderTriggered')
        console.log({key, target, type})
    })
</script>

效果：

生命周期.gif

在实例中可以看到，最初渲染中，onBeforeMount > onRenderTracked > onMounted，然后修改val数值，页面重新渲染触发onRenderTriggered > onBeforeUpdate > onUpdated。

最后父组件中移除组件时，触发beforeUnmount > onUnmounted

provide提供/inject注入

当需要从父组件向子组件传递数据时，可以使用props，但是如果组件之间深度嵌套，深层的子组件需要父组件的部分内容，此时如果沿着props一层层传递，就会显得非常复杂（当然也可以使用）

在之前的《不习惯的Vue3起步一》中曾经说到过attrs，这也可以用来获取祖先组件的属性，如果需要的数据不多，也可以使用这种方式。

通过provide和inject的结合，无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这特性有两部分：父组件有一个provide选项来提供数据，子组件有一个inject选项来使用这些数据。

首先准备一个父组件:

<template>
    <son></son>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted, provide, watch } from "vue";
    import son from './son.vue'

    let msg = ref('张三')
    provide("msgToChild", msg)
    watch(msg, (newval)=>{
        console.log(msg.value)
    })
</script>

然后是子组件：

<template>
    <h1> {{ msg }} 说：hello </h1>
    <button @click="change">改变</button>
</template>

<script setup lang="ts">
    import { ref,Ref, reactive, onMounted,useAttrs, inject } from "vue";

    let msg = inject('msgToChild')
    function change() {
        (msg as unknown as Ref<string>).value = Math.random().toString()
    }
</script>

效果：在子组件中inject获取到了父组件数据，并且子组件中修改，父组件数据也会watch监听到修改

注意：在上面的例子中，想要产生响应式改变，传递的数据需要ref或者reactive包裹。此外在子组件中获取到的msg类型其实是unknown，所以需要将其通过as进行转换。

不习惯的Vue3起步四 の 生命周期&provide/inject

生命周期

provide提供/inject注入

不习惯的Vue3起步四の生命周期&provide/inject