Vue3 响应性数组置空操作注意事项

老牛浏览 2209评论 0发表于 3 年前

1. 问题说明

在开发 Vue3 select 组件的过程中，使用 watch 监听数组变化时，将数组置空时出现了不符合预期的结果，示例代码如下：

<template>
    <button @click="handleClick">Button</button>
</template>

<script>
import { ref, watch } from "vue";

export default {
    setup(props) {
        const arrRef = ref([]);
        const handleClick = (e) => {
            arrRef.value = [];
        }

        watch(arrRef, (value, oldValue) => {
            console.log("arr changed:", value, oldValue)
        })

        return {
            arrRef,
            handleClick,
        }
    },
};
</script>

点击按钮，将数组置空，由于赋值前后都是空数组，预期 watch 回调是不会执行的，结果控制台有输出：

2. 解决方案

直接对数组赋值空数组一般场景下没有多大问题，但是特殊情况下（比如：使用 watch 监听时）有异常，将 arrRef.value = [] 修改为 arrRef.value.splice(0) 直接操作原数组，即符合预期，watch 回调不会执行，这也是 Vue 官方文档中推荐的用法。

暂无评论，快来发表评论吧~

私信

老牛@ilaoniu

老牛，俗称哞哞。单纯的九零后理工小青年。喜欢折腾，爱玩，爱音乐，爱游戏，爱电影，爱旅游...

最后活跃于 7 小时前