vue3生命周期及组件传参

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

生命周期

setup取代了beforCreate和created，但在setup中可以使用onMounted类的函数和watch方法

注意：除beforeCreate和created（被setup取代）使用外，其他生命周期的都需要提前引入使用

ex:

import { onMounted,onBeforeMount,reactive, ref, watch,nextTick,... } from 'vue'

使用生命周期（与vue2相比较）

常用：

beforeMount -> onBeforeMount -----> 挂载前被调用

mounted -> onMounted -----> 挂载完成后调用

beforeUpdate -> onBeforeUpdate -----> 数据更新时调用（数据被更新，dom未改变）

uodated -> onUpdated -----> 数据更新后调用，内存数据已修改，页面dom也已经更新渲染

不常用：

beforeUnmount -> onBeforeUnmount -----> 组件卸载之前调用

unmounted -> onUnmounted -----> 在卸载组件实例后调用

errorCaptured -> onErrorCaptured -----> 事件处理程序或者生命周期钩子抛出错误时调用

activated -> onActivated -----> 与keep-alive一起使用，当keep-alive包裹的组件激活时调用

deactivated -> onDeavtivated -----> 同样与keep-alive一起使用，当keep-alive包裹的组件停用时调用

vue3新引入的钩子函数：

renderTracked -> onRenderTracked -----> 作用：状态跟踪；在开发环境有用：跟踪所有响应式变量和方法，页面有update时就会跟踪它们并返回一个event对象

renderTriggered -> onRenderTriggered -----> 作用：状态触发；只在开发环境有效，与onRenderTracked效果类似，但它本身不会跟踪所有的响应式变量方法，只会定点追踪发生改变的数据，返回一个event对象

组件传参

与vue2传参方式类似：

定义子组件文件，父组件引入

父：

<template>
    <child :num="nums" @test="childChangeVal" />
</template>
///
let nums = ref(20)
const childChangeVal = (val) => {
    nums.value = val // 接收子组件改变父传过去的值,100
}

子：

<div @click="changeNum">点击改变</div>
import { defineProps, defineEmits } from 'vue'
<template>
    <div>{{nums}}<div>
</template>
///
setup(props, {emit}) {
    //接受参数形式：
    const props = defineProps({
        nums: Number,
    })
    // 事件
    const emit = defineEmits(['test'])
    const changeNum = () => {
        emit('test', 100)
    }
}

小白上路，如有错误欢迎各位指正。