很多人不知道你可以使用这个Key方法来重新渲染Vue组件!
时间:2023-03-23 01:34:25
科技观察
在某些情况下,我们不得不强制Vue重新渲染组件,如果没有,那可能是你的业务不够负责,反正我经常需要重新渲染组件,哈哈。虽然Vue不会自动更新的情况相对较少,但了解如何在自动更新时修复它是很有用的。大多数情况下,造成这个问题的根本原因是我们对Vue响应式的理解还没有到位。因此,请尝试确保我们正确使用Vue。反应有时会很棘手,我常常不知所措。在本节中,我们将做一些以前很少或从未做过的事情:使用key重新渲染组件。在这篇文章中,我将涵盖这些知识点:如何更改组件键的关键如何与多个子组件一起工作如何通过更改键的值来强制子组件更新自身以重新渲染组件我最喜欢的方法是use键属性,因为使用键的方式,Vue知道特定的组件与特定的数据相关。如果密钥保持不变,则不会更改组件。然而,如果键改变了,Vue知道它应该删除旧组件并创建一个新组件。这是一个非常基本的方法:每次调用forceRerender时componentKey的值都会改变。当componentKey的值改变时,Vue知道移除ComponentToReRender组件并创建一个新组件。这样ComponentToReRender就会重新渲染并重置里面的状态。好好!强制多个子节点更新也可以这样用于多个子组件:
模板>这里我们使用两个独立的键来控制每个子组件是否重新渲染。将它们分开是为了渲染其中一个子组件而不影响另一个。但是如果你想让两个子组件总是一起更新,你可以使用相同的kye。但是key必须是唯一的,所以下面的方法是行不通的:
这里只会渲染第一个Child组件.第二个被忽略,因为它有一个重复的键。为了解决这个问题,我们可以根据componentKey为每个child构造一个新的key:
因为我们每次都在componentKey后面加上-1和-2,所以这两个key总是唯一的,现在这两个组件都会被重新渲染。如果在列表中,可以使用如下方法:>
这里,我们将key构造为${componentKey}-${index},这样列表中的每一项都会得到一个唯一的key,只要componentKey发生变化,列表中的所有组件都会同时重新渲染。当然还有更简单的方法,就是用div包裹list,直接重新更新div即可:
这个思路可以用在很多地方,可以帮助我们摆脱很多困难,所以大家要牢记。好了,今天就分享给大家,我们下期再见,谢谢大家观看。作者:MichaelThiessen译者:前端小智来源:medium原文:https://morioh.com/p/08963bf07353本文转载自微信公众号“大运世界”,可通过以下二维码关注。转载本文请联系大千世界公众号。