Vue的异步组件与动态组件

异步组件：

• vue的一种性能优化的方法，可以实现组件的按需加载

• 组件通过import函数引用，什么时候需要什么时候加载

• 有利于项目的性能优化，提高页面的加载速度

• 路由懒加载就是使用了异步组件的原理

规则：使用import引入

components: {
IsAsyncDemo: () => import(‘./IsAsyncD.vue’)
},

ex：点击按钮才加载组件

<template>
  <div>
    <IsAsyncDemo v-if="isAsync"></IsAsyncDemo>
    <button @click="isAsync=true">异步加载组件</button>
  </div>
</template>

<script>
export default {
  name: 'AsyncComponent',

  components: {
    IsAsyncDemo: () => import('./IsAsyncD.vue') // 使用一个函数引入
  },

  data() {
    return {
      isAsync: false
    }
  }

}
</script>

在异步加载的过程中可能会出现以下错误：

报错：Syntax Error: Unexpected token (10:25)

解决办法：
1.安装babel 动态导入插件：npm install --save-dev babel-plugin-syntax-dynamic-impor
2.在.babelrc中配置使用此插件

{ “presets”: [“env”], “plugins”: [“syntax-dynamic-import”] }

动态组件

• 让多个组件同使用一个挂载点，并且组件间可以动态切换，这个挂载点就是 component 标签
• 简单来说是在 component 标签上添加一个is属性，属性值（即currentTabComponent）是控制组件间的切换的
• 可配合keep-alive使用，这样切换的时候就可以不用频繁渲染
  1.keep-alive是vue的内置组件，可以包含动态组件，当组件之间进行切换时，可以保持组件的状态，在内存中缓存不活动组件的实例，而不是销毁它们）
  2.并且自身也不会渲染成一个DOM元素，不会显示在父组件链中

规则1. 语法:is=‘compoent-name’ 动态对应 data 中对应的组件值

规则2.data中代表组件的属性值必须是引入组件名

ex1： 普通动态引入

template:

<component :is=“DynamicName”/> // 动态的对应是 data 的值

引入动态子组件

import Dynamic from ‘./Dynamic.vue’

在components中声明

components: {
Dynamic,
}

在data中定义

data(){
return {
DynamicName: ‘Dynamic’, // 这里DynamicName 的属性名必须是引入组件名Dynamic
}
}

如果是用在keep-alive中

<keep-alive>  // 失活的组件将会被缓存
	<component :is="DynamicName"/> 
</keep-alive>

ex2：可切换、循环动态引入 - 动态加载图片、视频、文本等组件

取循环中项目的值，对应子组件名字

<template>
  <div>
    <component :is="DynamicName"/>
    
    <!-- 循环动态加载  -->
    <div v-for='(val, key) in newsData' :key='key'>
	    <component :is='val.type'/> // 取循环中项目的值，对应子组件名字
    </div>
</div>
</template>

<script>
import Dynamic from './Dynamic.vue'

import IsImage from './IsImage.vue'
import IsVideo from './IsVideo.vue'
import IsText from './IsText.vue'


export default {
  components: {
    Dynamic,
    IsImage,
    IsVideo,
    IsText
  },

  data() {
    return {
      DynamicName: 'Dynamic',
      IsImageName: 'IsImage',
      IsVideoName: 'IsVideo',
      IsTextName: 'IsText',

      newsData: {
        1: {type: 'IsVideo'},
	     2: {type: 'IsText'},
        3: {type: 'IsImage'}
      }
    }
  }
}
</script>