首页 >> 知识 >> 动态组件 & 异步组件

动态组件 & 异步组件

您正在浏览的是 Vue 2.x 的文档。Vue 3 的文档在这里。

动态组件 & 异步组件

该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。

在动态组件上使用 keep-alive

草莓视频在线观看APP之前在一个多标签的界面中使用 is attribute 来切换不同的组件:

当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重新渲染导致的性能问题。例如草莓视频在线观看APP来展开说一说这个多标签界面:

你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的,但是在这个草莓视频污版免费中,草莓视频在线观看APP更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,草莓视频在线观看APP可以用一个 元素将其动态组件包裹起来。

来看看修改后的结果:

现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。你可以在这个示例查阅到完整的代码。

注意这个 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。

你可以在 API 参考文档查阅

网站地图