动态组件
在动态组件上使用 keep-alive
之前在一个多标签的界面中使用 is attribute 来切换不同的组件。
<component v-bind:is="currentTabComponent"></component>
当在这些组件之间反复切换时,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。
如果就像上面这样切换,当你切换 不同组件,再切换会先前的组件,先前的状态时不会被保存的。这是因为你每次切换新标签的时候,Vue都创建了一个新的 currentTabComponent 实例。
重新创建动态组件的行为通常是非常有用的,但是如果我需要在切回 上一个操作的组件的时候,能够保存上一回操作的状态,就需要把这些 组件实例 在第一次被创建的时候缓存下来。
这个时候就可以用一个Vue提供的 <keep-alive> 元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
注意这个
<keep-alive>
要求被切换到的组件都有自己的名字,不论是通过组件的name
选项还是局部/全局注册。
异步组件
在大型的应用当中,我们可能需要将引用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。
为了简化,
- Vue允许你以一个工厂函数的方式定义你的组件。(这个工厂函数会异步解析你的组件定义)
- Vue只有在这个组件需要被渲染的时候才会触发该工厂函数。(且将结果缓存起来供未来重渲染)
例如:
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
如你所见,这个工厂函数会收到一个 resolve
回调,这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason)
来表示加载失败。
这里的
setTimeout
是为了演示用的,如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用:(后面的内容和Webpack里面的知识点有关,等学了Webpack之后在回来研究)
Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包,这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) })
你也可以在工厂函数中返回一个
Promise
,所以把 webpack 2 和 ES2015 语法加在一起,我们可以这样使用动态导入:Vue.component( 'async-webpack-example', // 这个动态导入会返回一个 `Promise` 对象。 () => import('./my-async-component') )
当使用局部注册的时候,你也可以直接提供一个返回
Promise
的函数:new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })
#处理加载状态
这里的异步组件工厂函数也可以返回一个如下格式的对象:
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了, // 则使用加载失败时使用的组件。默认值是:`Infinity` timeout: 3000 })
注意如果你希望在 Vue Router 的路由组件中使用上述语法的话,你必须使用 Vue Router 2.4.0+ 版本。