为什么 vue v-model 不适用于数组道具？

Question

I have a custom component that takes the modelValue prop and emits the update:modelValue event. In the parent component I pass an array:

TestComponent.vue

<template>
  <div>
     <button @click="updateIt">Test</button>
  </div>
</template>

<script>
export default {
    props: {
       modelValue: Array
    },
    emits: ["update:modelValue"],
    setup(props, {emit}){
        return {
            updateIt(){
                emit("update:modelValue", [4,5,6])
            }
        }
    }
}
</script>

App.vue

<template>
  <div>
     <test-component v-model="myArr"/>
     <ul>
         <li v-for="i in myArr" v-text="i"></li>
     </ul>
  </div>
</template>

<script>
import TestComponent from "./TestComponent.vue";

export default {
    components: {
        TestComponent
    },
    setup(props, {emit}){
        const myArr = reactive([1,2,3]);

        return {
            myArr
        }
    }
}
</script>

The list will not get updated when I press the button, why?

Answer 1

Internally, the v-model directive gets changed to a handler function for the update:modelValue event that looks something like this:

$event => ((exp => $event) where exp is the expression in the directive

which basically means, when the update:modelValue event is emitted, the value you emit is assigned directly to the myArr variable, effectively replacing the whole reactive variable without triggering the reactivity chain, because it does not happen through the proxy.

If myArr would be a ref([]) vue detects it and the handler function looks something like this:

$event => (exp? (exp).value = $event: null) where exp is the expression in the directive

which means that the value gets assigned through the ref proxy, triggering the reactivity chain.

But there is no internal logic that checks if the passed expression is an array and if so, does some splice push magic to keep the original variable, you have to do that yourself.

Possible Solutions:

1) use an object key:

 <test-component v-model="myArr.data"/>

 ...

 const myArr = reactive({
    data: [1,2,3]
 });

2) use a custom handler function:

 <test-component :modelValue="myArr" @update:modelValue="onChange"/>

 ...

 const myArr = reactive([1,2,3]);

 function onChange(newval){
   myArr.splice(0, myArr.length, ...newval);
 }

Answer 2

For Options API

I had the same problem using options API and came by this solution.

The main problem is with the proxy object that is being passed to parent component when emitting the event.

So make sure to pass plain array using this technique:

this.$emit('update:modelValue', JSON.parse(JSON.stringify(this.tags)));

In this code sample, the tags is the array that is being updated and pushed new value into that I want to be also reflected in the model provided by parent component.

Note: Theoretically this solution also works for Composition API but I haven't tested it with Composition API.