vue中的动态组件以及异步组件

[774848686]

动态组件以及异步组件

动态组件

可以通过 Vue 的 元素加一个特殊的 is attribute 来实现

    <component v-bind:is="currentTabComponent" props="propsOptions"></component>

• 已注册组件的名字，或
• 一个组件的选项对象

应用场景

• tab之间的切换不同的组件，为了保持组件之前的状态，可用keep-alive避免重复渲染
• 在工作中我们可能会根据不同的条件进行不同试图的渲染，简单的我们可以进行v-if进行判断；但是如果一旦情况比较多，项目维护起来就很不方便；我们可进行封装一个动态的组件:

//CompDynamic.vue
<template>
  <component :is="component" :data="compOptions" v-if="component" />
</template>

<script>
export default {
  props: {
    compName: {
      type: String,
      default: "CompA"
    },
    compOptions: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    loadComp() {
      if (!this.compName) {
        return null;
      }
      return () => import(`./${this.compName}`);
    }
  },
  data() {
    return {
      component: null
    };
  },
  mounted() {
    this.component = () => this.loadComp();
  },
  watch:{
    compName(){
      this.component = () => this.loadComp();
    }
  }
};
</script>

<style>
</style>

以上就是使用webpack的动态导入组件，从而达到我们动态注册组件；

异步组件

官方解释

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

应用场景：

1. 当我们的项目足够大的时候，我们是要对一些组件的进行异步加载，提升页面的首屏加载速度

几种注册方法

1. 全局注册

  // 全局注册组件
  Vue.component(
    'async-comp',
    // 这个 `import` 函数会返回一个 `Promise` 对象。
    () => import('./components/CompC.vue')
  )

2. 局部注册

  new Vue({
  // ...
  components: {
    'async-comp': () => import('./components/async-comp')
  }
});

动态导入的几种方式

1. 利用require语法webpack进行代码的切割；

  Vue.component('async-comp', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(['./components/async-compt'], resolve)
})

2. 利用es6的import语法

  // 全局注册组件
Vue.component(
  'async-comp',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./components/CompC.vue')
)

异步组件高级用法

为了更好的提升用户的体验，我们会给还未加载完成的组件添加一些占位组件，比如CompLoading组件，给用户一些反馈。于是vue在注册异步组件的时候在工厂函数中提供了这些，进行统一管理：

  Vue.component('async-comp', (resolve, reject) => ({
    component: import('./components/CompC.vue'),
    loading: loadingComp,
    error: errorComp,
    delay: 500,
    timeout: 1000
}));