目录
一、动态组件
我们在一个多标签的界面中使用 is
attribute 来切换不同的组件:
<component v-bind:is="currentTabComponent"></component>
如果我们需要频繁的切换页面,可以使用keep-alive缓存当前组件的状态
具体详见官网例子动态组件 & 异步组件 — Vue.js
keep-alive使用后生命周期会增加两个钩子activated和deactivated,分别在组件被调用和离开的时候激活
父组件
<template>
<div>
<el-button-group>
<el-button
v-for="(item, index) in btnGroup"
:key="index"
@click="change(item)"
>{
{item.name}}</el-button>
<keep-alive>
<component :is="currentCom"></component>
</keep-alive>
</el-button-group>
</div>
</template>
<script>
import ChildOne from './component/child1'
import ChildTwo from './component/child2'
export default {
name: 'index',
components:{
ChildOne,ChildTwo
},
data(){
return{
btnGroup: [
{name: 'ChildOne', disabled: true},
{name: 'ChildTwo', disabled: false},
],
currentCom:'ChildOne'
}
},
methods:{
change(e){
this.currentCom = e.name;
}
}
}
</script>
子组件
<template>
<div>
<div>第一个页面</div>
<span>{
{count}}</span>
<button @click="change">修改</button>
</div>
</template>
<script>
export default {
name: 'ChildOne',
data(){
return{
count:1,
}
},
activated () {
console.log("activated")
},
deactivated () {
console.log("deactivated")
},
methods:{
change(){
this.count+=1;
}
}
}
</script>
效果:
在子组件里点击修改按钮进行数字增加,然后切换组件显示,原来计算的数值会被缓存,不需要页面重新加载。
keep-alive属性
include
- 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude
- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
include
和exclude
prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
max
- 数字。最多可以缓存多少组件实例。
最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
二、异步组件
在开发大型项目的时候,我们会把大型项目根据组件分割为小块代码,然后异步加载代码块,这样可以让首屏部分代码块优先加载,加快首屏渲染速度,其他代码块在需要的时候再加载,加载过的代码块会被缓存起来,以便复用重新渲染。
异步组件声明
异步组件声明有两种方式,通过工厂函数
Vue.component('async-example', function (resolve, reject) {
resolve({
template: '<div>hello vue !</div>'
})
})
还可以通过工厂函数,返回一个promise对象
const Foo = () => Promise.resolve({
template: '<div>hello vue !</div>'
})
或者通过 import()
Vue.component('async-wepack-example', () => import('./my-async-component'))
路由懒加载方法
通过工厂函数返回一个promis对象,异步加载组件
import() 返回一个promise对象
var myComponent = () => import('./my-component')