没有：key更改数据时，Vue组件不会更新

Question

我的应用程序中有这个简单的面包屑组件。有一个数据属性pickedTable，但是当它更改时，该组件不会重新呈现。但是，当我添加：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/