关于 Vue3 自定义组件双向绑定问题?

Question

比如一个自定义组件

<template >
  <div></div>
</template>

<script setup>
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Array,
    defualt: [],
  },
});

watch(
  () => props.modelValue,
  () => {
      // 一些操作
  },
  {
    immediate: true,
  }
);

</script>

目前遇到的情况是，外部传进来的数据和组件处理的数据有差异，需要处理转换下，那个转换函数还要去遍历另一个树对象处理，所以每次 emit 都会触发 watch ，就会很耗费性能。
有没有办法，如果组件内部 emit 改变 modelValue 的值不触发组件内部 watch 监听,只有在父组件改变了传入的值才触发组件内部 watch监听

Answer 1

const visible = computed({
    get() {
        return props.modelValue,
    }
    set(val) {
        emit("update:modelValue", val)
    }
})

可以这样子写