作者：Michael Thiessen 译者：前端小智 来源：medium
点赞再看，养成习惯
本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
在某些情况下，我们必须强制Vue重新渲染组件，如果没有，那可能，你做的业务还不够负责，反正我是经常需要重新渲染组件，哈哈。
虽然Vue不会自动更新这种情况是相对比较少，但是知道如何在出现这个问题时修复它还是很有用的。
在大多数情况下，此问题根源还是我们对 Vue 的响应式理解还是不够到位。 因此，要尽量确保我们要正确使用了Vue。 响应式有时过于棘手，我也经常不知道所措。
这节，我们就来做一些之前很少做过或者没做过的：用 key 来让组件重新渲染。
在这篇文章中，会涉及到这几个知识点：
- key 是如何改变组件
- key 如何与多个子组件一起工作
- 如何强制子组件自己更新
key 的值来重新渲染组件
我最喜欢的方法是使用key属性，因为使用key 的方式，Vue 就知道了特定组件与特定数据相关。
如果 key保持不变，则不会更改组件。 但是，如果key发生更改， Vue 知道它应该删除旧组件并创建一个新组件。
下面是一个非常基本的方法:
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender() {
this.componentKey += 1;
}
}
}
每次调用forceRerender时，componentKey 的值就会更改。 当componentKey 的值发生改变时，Vue 就知道把ComponentToReRender组件删除并创建一个新组件。
这样ComponentToReRender就会重新渲染并重置里面的状态。nice nice!
同样用这种方式也可以用于多个子组件：
export default {
data() {
return {
key1: 0,
key2: 0,
};
},
methods: {
forceRerender(child) {
if (child === 1) {
this.key1 += 1;
} else if( child === 2) {
this.key2 += 1;
}
}
}
}
这里我们使用了两个单独 key 来分别控制每个子组件是否重新渲染。将它们分开是为了其中的一个子组件渲染，不会影响到另外另一个。
但如果希望两个子组件总是一起更新，则可以使用相同的 kye。但是，key必须是唯一的，所以下面这种方式，不能工作：
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
在这里，仅第一个Child组件会被渲染。 第二个被忽略，因为它具有重复的key 了。
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
为了解决这个问题，我们可以基于componentKey为每个孩子构造一个新key：
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
因为我们每次在componentKey后面添加-1和-2，所以这两个key始终是唯一的，现在这两个组件都将被重新渲染。
如果是在列表中，则可以使用如下方式：
export default {
data() {
return {
list: [
// ...
],
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
在这里，我们将key构造为${componentKey}-${index}，因此列表中的每个项目都会获得唯一的key，只要componentKey一改变，列表中的所有组件将同时重新渲染。
当然，还有更简单的方式，就是用div把列表包裹起来，直接对 div重新更新就行了：
export default {
data() {
return {
list: [
// ...
],
componentKey: 0,
};
},
methods: {
forceRerender(child) {
this.componentKey += 1;
}
}
}
这中思路可以用在很多地方，可以为我们摆脱很的困境，大家要牢记起来。
好了，今天就跟大家分享到这里，我们下期在见，谢谢大家的观看。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文：https://morioh.com/p/08963bf07353
交流文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复福利，即可看到福利，你懂的。
