有本地的状态
某种初始化过程，通常在created或mounted钩子中
通过jQuery或普通api进行无响应的DOM操作
如果你对该列表进行排序或以任何其他方式对其进行更新，则需要重新渲染列表的某些部分。 但是，不会希望重新渲染列表中的所有内容，而只是重新渲染已更改的内容。
为了帮助 Vue 跟踪已更改和未更改的内容，我们提供了一个key属性。 在这里使用数组的索引，因为索引没有绑定到列表中的特定对象。
const people = [ { name: 'Evan', age: 34 }, { name: 'Sarah', age: 98 }, { name: 'James', age: 45 }, ];
如果我们使用索引将其渲染出来，则会得到以下结果：
<ul> <li v-for="(person, index) in people" :key="index"> {{ person.name }} - {{ index }} </li> </ul> // Outputs Evan - 0 Sarah - 1 James - 2
如果删除Sarah，得到：
Evan - 0
James - 1
与James关联的索引被更改，即使James仍然是James。 James会被重新渲染，这并不是我们希望的。
所以这里，我们可以使用唯一的 id 来作为 key
const people = [ { id: 'this-is-an-id', name: 'Evan', age: 34 }, { id: 'unique-id', name: 'Sarah', age: 98 }, { id: 'another-unique-id', name: 'James', age: 45 }, ]; <ul> <li v-for="person in people" :key="person.id"> {{ person.name }} - {{ person.id }} </li> </ul>
在我们从列表中删除Sarah之前，Vue删除了Sarah和James的组件，然后为James创建了一个新组件。现在，Vue知道它可以为Evan和James保留这两个组件，它所要做的就是删除Sarah的。
如果我们向列表中添加一个person，Vue 还知道可以保留所有现有的组件，并且只需要创建一个新组件并将其插入正确的位置。这是非常有用的，当我们有更复杂的组件，它们有自己的状态，有初始化逻辑，或者做任何类型的DOM操作时，这对我们很有帮助。
所以接下来看看，如果使用最好的方法来重新渲染组件。
更改 key 以强制重新渲染组件
最后，这是强制Vue重新渲染组件的最佳方法（我认为）。
我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。
这是一个非常基本的方法
<template> <component-to-re-render :key="componentKey" /> </template> export default { data() { return { componentKey: 0, }; }, methods: { forceRerender() { this.componentKey += 1; } } }
每次forceRerender被调用时，我们的componentKey都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。
如果确实需要重新渲染某些内容，请选择key更改方法而不是其他方法。
您可能感兴趣的文章: