Vue动态组件
H5_ljy 人气:01.什么是动态组件
当我们希望页面中的某个地方，在不同组件之间进行动态切换，这时候除了条件渲染，还可以使用动态组件。
2.如何实现动态组件渲染
vue提供了一个内置的组件，专门用来实现动态组件的渲染：通过 is 属性动态指定要渲染的组件
因为要渲染的组件是不确定的，所以要通过data申明一个变量用来接收组件的名称，用 :is 动态绑定这个变量到组件中，通过按钮添加事件改变变量的值来切换相应组件
案例：
//父组件App中
<template>
<div v-cloak class="App">
<button v-for="(item, index) in arr" :key="index" @click="()=>msg=item">点击切换box{{index+1}}组件</button>
<component :is="msg"></component>
</div>
</template>
<script>
import box1 from "./components/box1.vue"
import box2 from "./components/box2.vue"
import box3 from "./components/box3.vue"
export default {
data() {
return {
msg: 'box1',
arr:['box1', 'box2', 'box3']
}
},
components: {
box1,
box2,
box3
},
}//子组件box1中
<template>
<div>
<h1>box1组件中</h1>
</div>
</template>
//子组件box2中
<template>
<div>
<h1>box2组件中</h1>
</div>
</template>
//子组件box3中
<template>
<div>
<h1>box3组件中</h1>
</div>
</template>
3.如何实现缓存组件
动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。
有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件,代码如下：
//默认全部组件缓存
<keep-alive>
<components :is="msg"></components>
</keep-alive>
keep-alive提供了三种匹配组件的方法:
1.include 用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔； 可以写组件名字符串 也可以写正则
<keep-alive :include="/box2|box3/"> //匹配bo2和box3组件缓存
<component :is="msg"></component>
</keep-alive>
2.exclude 只有名称匹配的组件不会被缓存。多个组件名之间使用英文的逗号分隔；
<keep-alive exclude="box2">
<component :is="msg"></component>
</keep-alive>
3.max 填数字，表示缓存最近被渲染过的几个组件
<keep-alive :max="2">
<component :is="msg"></component>
</keep-alive>
keep-alive对应的生命周期函数：
当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发组件的 activated 生命周期函数。
4.异步组件
vue开发过程中，我们会做出特别多特别多的组件，包括login,header,footer,main等等。这样使整个网站看起来就十分的庞大，当我们在打开网页的时候，突然一下子把这些所有的组件加载上来，这么多的请求全部同时开始请求，势必会造成网页打开很慢，使客户得到的是非常差劲的体验。
在单页应用（SPA）中，如果没有用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
此时我们需要运用到异步加载并缓存组件
什么是异步加载并缓存组件？
1、 异步加载组件：用不到的组件不会加载，因此网页打开速度会很快，当你用到这个组件的时候，才会通过异步请求进行加载；
官方解释：Vue允许将组件定义为一个异步解析（加载）组件定义的工厂函数，即Vue只在实际需要渲染组件时，才会触发调用工厂函数，并且将结果缓存起来，用于将来再次渲染。
2、 组件缓存起来：通过异步加载的组件会缓存起来，当你下一次再用到这个组件时，丝毫不会有任何的疑迟，组件很快会从缓存中加载出来。
如何使用：
方法一：通过webpack2.0的按需加载
//1 全局：
Vue.component('component-name',function(resolve){
//require 语法告诉 webpack自动将编译后的代码分割成不同的块
//这些块将通过 Ajax 请求自动下载
require(['./my-async-componnet'],resolve)
})
//注册全局组件名，但只有一个名字，没有实体，相当于空的
//当需要这个组件时，调用上面的工厂函数，触发webpack的异步加载模块方法
//然后异步请求一个模块，请求成功后，这个模块内容即为组件实体部分，并对应地方渲染，加载内容也缓存下来。
//2 局部
new Vue({
components: {
'component-name':function(resolve) {
require(['./my-async-component'], resolve)
}
}
})
方法二：通过webpack2+es2015返回一个promise(主流 )
//1 全局：
Vue.component('component-name',
（）=> import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象,不要问我为什么,人家webpack这样设计的。
)
//2 局部：
new Vue({
components: {
'component-name': () => import('./my-async-componnet')//这个 `import` 函数会返回一个 `Promise` 对象。
}
})
方法三：高级异步组件（可以处理加载状态）
常常用在路由中使用，vue 2.3.0+ 新增终极解决方案,要求路由2.4.0+
//工厂对象可以返回一个如下对象，对象里面的一些配置参数
const AsyncComponent = () => ({
// 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
component: import('./MyComponent.vue'),
// 异步组件加载时使用的组件
loading: LoadingComponent,
// 加载失败时使用的组件
error: ErrorComponent,
// 展示加载时组件的延时时间。默认值是 200 (毫秒)
delay: 200,
// 如果提供了超时时间且组件加载也超时了，
// 则使用加载失败时使用的组件。默认值是：`Infinity`
timeout: 3000
})
加载全部内容