1. 问题：

在父组件中有一个v-for循环创建子组件，类似于手机应用商店的场景。每次从后台返回数据后，通过比较数据的差异看是否需要更新。如需要则使用splice方法，如下父组件示例：

<div v-for="item in list">
    <subC :itemdata="item"></subC>
</div>

list = ref([]);
newList = await getData();
update(list, newList);
function update(oldList, newList) {
    // 循环判断每个元素是否需要更新，需要使用splice先删除，在插入新元素
        list.splice(i, 1, item);
}

由于oldList是数组，引用类型，可以直接修改值，这个做法应该是没问题的。

但是实际发现，列表内容始终不更新，在网上找了各种资料，都说splice是可用的，到底是什么问题呢？
当我看到子组件里写的一行代码时，我意识到问题真正的原因

const itemdataProp = ref(props, 'itemdata');

因为子组件里面没有对父组件的prop直接使用，而是用ref套了一层，导致子组件没有响应式了。

2. 修改：

1. 不用对props的值重新复制，可以直接使用props.itemdata
2. 使用toRef而不是ref接收props的值，即
    const itemdataProp = toRef(props, 'itemdata');