很多人不知道你可以使用这个关键方法来重新渲染Vue组件！
时间：2023-04-02 19:26:27
HTML
作者：MichaelThiessen译者：前端小智来源：medium喜欢再看一遍，养成习惯分类，也整理了很多我的文档，教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。在某些情况下，我们必须强制Vue重新渲染组件。如果不是，那么也许您对您的业务没有足够的责任感。反正我经常需要重新渲染组件，哈哈。虽然Vue不会自动更新的情况相对较少，但了解如何在自动更新时修复它是很有用的。大多数情况下，造成这个问题的根本原因是我们对Vue响应式的理解还没有到位。因此，请尝试确保我们正确使用Vue。反应有时会很棘手，我常常不知所措。在本节中，我们将做一些以前很少或从未做过的事情：使用key重新渲染组件。在本文中，我将涵盖这些知识点：关键是如何更改组件键如何与多个子组件一起工作如何通过更改键的值来强制子组件更新自身以重新渲染组件我最喜欢的方法是使用key属性，因为使用key的方式，Vue知道特定的组件与特定的数据相关。如果密钥保持不变，则不会更改组件。然而，如果键改变了，Vue知道它应该删除旧组件并创建一个新组件。这是一个非常基本的方法：每次调用forceRerender时，componentKey的值都会发生变化。当componentKey的值改变时，Vue知道移除ComponentToReRender组件并创建一个新组件。这样ComponentToReRender就会重新渲染并重置里面的状态。好好！强制多个子节点更新也可以这样用于多个子组件：
这里我们使用两个单独的键来控制每个子组件是否重新渲染。将它们分开是为了渲染其中一个子组件而不影响另一个。但是如果你想让两个子组件总是一起更新，你可以使用相同的kye。但是，密钥必须是唯一的，因此以下内容将不起作用：
>脚本>exportdefault{data(){return{componentKey:0,};},方法：{forceRerender(child){this.componentKey+=1;}}}在这里，只有第一个子组件会被渲染。第二个被忽略，因为它有一个重复的键。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。为了解决这个问题，我们可以根据componentKey为每个child构造一个新的key：
因为我们每次都在componentKey后面加上-1和-2，所以这两个键总是唯一的，现在这两个组件都会被重新渲染。如果在列表中，可以使用如下方法：
这里我们将key构造成${componentKey}-${index}这样列表中的每一项都会得到一个唯一的key只要componentKey发生变化所有的组件都会重新渲染同时。当然，还有更简单的方法，就是用div包裹list，直接更新div：
这个思路可以用在很多地方，可以帮助我们摆脱很多困难，所以大家要牢记在心。好了，今天就分享给大家，我们下期再见，谢谢大家观看。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://morioh.com/p/08963bf0...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。
