Vue3开发模式探索：组件状态变更后emit时机的正确用法

一、问题背景

首先用一个简单的例子来铺垫下背景：

有一个组件Parent ，它有个子组件叫RevertButton ，子组件支持传入isDeleted 属性来控制子组件是展示正常态还是被删除态。伪代码如下所示：

// Parent.vue
<template>
    <RevertButton
        v-model:isDel="isDeleted"
        @deleted="handleButtonDeleted"
        @revert="handleButtonRevert"
    >这是个可删除按钮</RevertButton>
</template>
<script lang="ts" setup>
const isDeleted = ref(false)
const handleButtonDeleted = () => {
    // 在按钮被删除时，执行一些操作
    console.log("RevertButton被删除了")
}
const handleButtonRevert = () => {
    // 在按钮从被删除态恢复时触发
    console.log("RevertButton被恢复了")
}
</script>

在子组件中，会包含一个删除按钮，用户点击删除按钮后按钮展示被删除态，在此状态可以点击恢复按钮再次变为正常态：

• 正常态

• 被删除态

二、错误的子组件状态变更emit写法

关于子组件内部的实现逻辑，其实非常简单，就是在删除按钮的点击事件时将组件状态修改被删除，然后emits("deleted") ，在按钮从被删除态恢复时，修改组件状态，然后emits("revert") 。依照这个思路，很容易写出如下代码：

<template>
    ...
    <button @click="handleDelete">删除</button>
    <button @click="handleRevert">恢复</button>
</template>
<script lang="ts" setup>
// useVModel是vueuse提供的快速实现双向绑定的工具hook
const isDelModel = useVModel("props", "isDel")
const handleDelete = () => {
    isDelModel.value = true
    emits("deleted")                                    
}
const handleRevert = () => {
    isDelModel.value = false
    emits("revert")                                    
}
</script>

仅限于我们的功能而言，似乎已经可以了，但是其实是有问题的，大家可以先思考下问题在哪里？

三、emits依赖事件还是依赖状态？

结合标题，在结合第二部分中的例子，很明显，在前面的例子中，emits是依赖事件的。

什么是依赖事件呢？就是emits的执行时机是在事件中。也就是第二部分例子中的handleDelete 和handleRevert 。

那么在本文的例子中，依赖事件会有什么问题呢？

简单的说，就是父组件在监听子组件状态变化时，只能监听到事件引起的状态变化，而监听不到不依赖事件的状态变化。

• 事件引起的状态变化

即在handleDelete 和handleRevert 事件中修改状态，同时触发emits 。这时候父组件是可以监听到的。

• 不依赖事件的状态变化

试想，如果我们在子组件中直接修改isDelModel.value 的值，会发生什么？没错，是无法触发父组件的监听事件的。有的同学可能会说，我可以修改后手动调用emits ，当然可以，但是这样会导致写很多冗余代码，在每一次修改isDelModel.value 后，都手动调用emits 。

四、组件状态的emits应该和状态绑定

所以，到这里，我们可以总结一个小经验：就是组件状态变化相关的emits，应该和组件状态唯一绑定，不应该依赖任何修改状态的事件。

还是拿第二部分的代码为例，我们只需要如下修改即可实现emits和状态绑定：

const handleDelete = () => {
    isDelModel.value = true                                  
}
const handleRevert = () => {
    isDelModel.value = false                             
}
watch(isDelModel, (val, prev) => {
    if (val && !prev) {
         emits("deleted")
         return                 
    }
    if (!val && prev) {
         emits("revert")                
    }
})

这样，不管我们是在子组件内部修改isDelModel.value，还是在父组件修改了isDeleted.value ，都可以正确触发父组件对状态的监听。

五、总结

这里我把状态变化归为两类：

• 依赖事件的状态变化
• 状态值被修改引起的变化

同时，emits的执行时机也可以分为两类：

• 事件引起的emits
• 状态变更引起的emits，这种情况包括事件

在实际开发中，分清楚是哪一种情况可以帮助我们确定应该在哪里执行emits 。

本文内容皆来自于日常开发的简单思考，肯定有不完善或是不合理的地方，如有遗漏或者谬误，欢迎指正～