vue关于v-for循环页面不更新问题

在开发中遇到的一个有意思的问题，记录一下分享给大家

当我点击按钮清空的时候需要将v-for中的brandInfoList中的brandId清空，结果一直清空不了，我就一直找问题原因，刚开始我以为是brandInfoList的值没有清空成功，然后我就在控制台输出发现form.brandInfoList的值已经变更了。我第二个判断就是认为双向绑定没有生效，直接赋值改为set赋值。结果发现页面的brandId依旧没有清空。 这个时候我就意识到这个是v-for的刷新机制问题，那么我就找到页面代码发现key绑定的是v-for的index，这个时候我就想起了v-for的原理，立马把key="i"改为了key="JSON.stringify(item)"问题解决

<button @click="clearTable()">清空</button>
<tr v-for="(item, i) in form.brandInfoList" :key="i">
   <td class="w-20"><input v-model="item.brandId"></input></td>
</tr>

<script setup>
const form = reactive({
    brandInfoList: []
})

function clearTable() {
    form.brandInfoList = [
        {brandId: undefined}
    ]
}
</script>