Vue的动态组件是一种强大的功能,它可以让我们在不同的场景下使用不同的组件,而不需要重新渲染整个页面。它可以帮助我们更好地处理复杂的应用程序,并且可以节省大量的时间和资源。
Vue的动态组件是一种特殊的Vue实例,它可以根据不同的条件来切换不同的组件。这意味着我们可以根据用户行为、URL参数、服务器端数据或其它因素来决定要显示哪些内容。
使用Vue动态组件非常方便:我们只需要在HTML中声明一个
标签,然后使用v-bind:is属性将其标识为特定的Vue实例即可。例如:
<component v-bind:is="currentView"></component>
当currentView变量被修改时,该标记将会被重新渲染,并根据新值显示相应的内容。这就是Vue动态组件最大的优势所在——我们可以根据当前情况来切换不同的内容而无需重新刷新整个页面。
此外,Vue还具有一些先进的特性来帮助开发者使用动态组件更好地处理多个子视图之间的通信问题。例如:v-slot、v-model、v-on 等特性都能帮助开发者快速而有效地处理子视图之间通信问题。
总之,Vue 动态组件提供了一套强大而有效的工具来帮助开发者快速而有效地处理多页应用中多页之间通信问题。使用 Vue 动态组件能够减少代码量并提升代码执行效率,是一个很好的工具来带来优化体验和减少开发时间。
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。
keep-alive
我们之前曾经在一个多标签的界面中使用 is
attribute 来切换不同的组件:
<component :is="currentTabComponent"></component>
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:
点击此处实现
你会注意到,如果你选择了一篇文章,切换到 Archive 标签,然后再切换回 Posts,是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候,Vue 都创建了一个新的 currentTabComponent
实例。
重新创建动态组件的行为通常是非常有用的,但是在这个案例中,我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive>
元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>
来看看修改后的结果:
点击此处实现
现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。你可以在这个示例查阅到完整的代码。
你可以在 API 参考文档查阅更多关于 <keep-alive>
的细节。
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 有一个 defineAsyncComponent
方法:
const app = Vue.createApp({})
const AsyncComp = Vue.defineAsyncComponent(
() =>
new Promise((resolve, reject) => {
resolve({
template: "<div>I am async!</div>"
})
})
)
app.component("async-example", AsyncComp)
如你所见,此方法接受返回 Promise
的工厂函数。从服务器检索组件定义后,应调用 Promise 的 resolve
回调。你也可以调用 reject(reason)
,以指示加载失败。
你也可以在工厂函数中返回一个 Promise
,所以把 webpack 2 和 ES2015 语法加在一起,我们可以这样使用动态导入:
import { defineAsyncComponent } from "vue"
const AsyncComp = defineAsyncComponent(() =>
import("./components/AsyncComponent.vue")
)
app.component("async-component", AsyncComp)
当在本地注册组件时,你也可以使用 defineAsyncComponent
import { createApp, defineAsyncComponent } from "vue"
createApp({
// ...
components: {
AsyncComponent: defineAsyncComponent(() =>
import("./components/AsyncComponent.vue")
)
}
})
异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个 <Suspense>
,它将被视为该 <Suspense>
的异步依赖。在这种情况下,加载状态将由 <Suspense>
控制,组件自身的加载、错误、延迟和超时选项将被忽略。
异步组件可以选择退出 Suspense
控制,并通过在其选项中指定 suspensable:false
,让组件始终控制自己的加载状态。
你可以在中查看可用选项的列表 API 参考
Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如:数字和运算颜色的显示...
Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用...
本节使用单文件组件代码示例的语法本指南假定你已经阅读了组合式 API 简介和响应性原理。如果你不熟悉组合式 API,请先阅读这篇...
本指南假定你已经阅读了 Provide / Inject、组合式 API 介绍和响应性基础。如果你不熟悉组合式 API,请先阅读这篇文章。我们也可...
为了学习如何更好地使用 Vue,不需要阅读本页,但是它提供了更多信息,如果你想知道渲染在背后是如何工作的。#虚拟 DOM现在我们...