在开发过程中，有时候会遇到这么一种情况，通过动态的赋值，但是dom没有及时更新，能够获取到动态赋的值，但是无法获取到双向绑定的dom节点，这就需要我们手动进行强制刷新组件。一般有这4种方法：
- 重新渲染整个页面（别笑，虽然不可取的，但确实是一种方法）
- v-if条件按条件加载组件（这个方式会不断的删除构建dom，开销较大）
- vue.$forceUpdate 方法（可选）
- 最好的方法：在组件上添加:key值
v-if 方法
为组件添加v-if指令
<template>
<my-component v-if=“renderComponent” />
</template>
通过$nextTick，在下一个事件循环“tick”中更新v-if值，使用my-component组件重新构建。
<script>
export default {
data() {
return {
renderComponent: true,
};
},
methods: {
forceRerender() {
// Remove my-component from the DOM
this.renderComponent = false;
this.$nextTick(() \=> {
// Add the component back in
this.renderComponent \= true;
});
}
}
};
</script>
编定:key值
这是强制Vue重新渲染组件的最佳方法。
在Vue.js中，key是6个特殊属性key, ref, is, slot, slot-scope, scope其中之一。
- key的值可以是number，也可以是string。
- key主要作用于Vue的virtual DOM算法，在diff new nodes list和old nodes list时，作为识别VNode的一个线索。
- 如果不用key，Vue会用一种算法：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。
- 如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed。
- 拥有同一个parent的children必须有unique keys。重复的key的导致render error。
vue.js的虚拟DOM算法，在更新vNode时，需要从旧vNode列表中查找与新vNode节点相同的vNode进行更新，如果这个过程设置了属性key，过程就会快很多。
代码如下：
<template>
<my-component :key=“componentKey” />
</template>
脚本中更改componentKey的值，就可以重新渲染my-component。
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
