Vue06---异步组件和动态组件

 

目录

一、动态组件

keep-alive属性

二、异步组件

异步组件声明

路由懒加载方法

---

一、动态组件

我们在一个多标签的界面中使用 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')