在内部,v-model
指令更改为处理函数update:modelValue
事件看起来像这样:
$event => ((exp => $event)
其中 exp 是指令中的表达式
这基本上意味着,当update:modelValue
事件被发出时,您发出的值将直接分配给myArr
变量,有效地替换整体reactive
变量而不触发反应链,因为它不是通过代理发生的。
If myArr
将是一个ref([])
vue 检测到它并且处理函数看起来像这样:
$event => (exp ? (exp).value = $event : null)
其中 exp 是指令中的表达式
这意味着该值是通过引用代理分配的,从而触发反应链。
但是没有内部逻辑来检查传递的表达式是否是数组,如果是,是否进行一些拼接推送魔法来保留原始变量,您必须自己执行此操作。
可能的解决方案:
1)使用对象键:
<test-component v-model="myArr.data"/>
...
const myArr = reactive({
data: [1,2,3]
});
2)使用参考:
<test-component v-model="myArr"/>
...
const myArr = ref([1,2,3]);
3)使用自定义处理函数:
<test-component :modelValue="myArr" @update:modelValue="onChange"/>
...
const myArr = reactive([1,2,3]);
function onChange(newval){
myArr.splice(0, myArr.length, ...newval);
}