Vue 组件在没有 :key 的情况下数据更改时不会更新

Question

我的应用中有这个简单的面包屑组件。有一个数据属性pickTable，但是当它更改时，组件不会重新渲染。但是当我添加 :key="pickedTable" 时，它会重新渲染。为什么会这样？

有其他人遇到过这个问题吗？

export default {
    template: `
        <div class="cr-snackbar">
            <div class="cr-snackbar-selection">
                Table {{ pickedTable }}
            </div>
        </div>
    `,

    data()
    {
        return {
            pickedTable: '2',
        }
    },

    mounted()
    {
        setInterval(() => {
            this.pickedTable = '3'
        }, 3000)
    }
}

我的解决方案是添加密钥

<div class="cr-snackbar-selection" :key="pickedTable">
  Table {{ pickedTable }}
</div>

Answer 1

这不是问题，而是功能。

Vue 使用一种算法来最小化元素移动，并尝试尽可能多地就地修补/重用相同类型的元素。有了键，它会根据键的顺序变化对元素进行重新排序，并且不再存在键的元素将始终被删除/销毁。

这里是官方文档：https://vuejs.org/v2/api/#key

这是一篇关于组件重新渲染的好文章：https://michaelnthiessen.com/force-re-render/