Vue3 - 组件化开发二

温故知新

动态组件

动态组件是使用component组件，通过特殊的attribute中的is 来实现的

	<component :is='currentTab'></component>

currentTab的值要求

• 可以是通过component函数注册的组件
• 组件对象的components对象中注册的组件

动态组件传值

动态组件可以传值和监听事件吗？

肯定的，只是需要将属性和监听事件放到component上来使用

	<component name='tomato'
						age = '18'
						@doClick = 'doClick'
						:is = 'currentTab' />

keep-alive

• 切换tab的时候，保留组件内的状态
• keep-alive属于vue的内置组件

App.vue

	<keep-alive>
		<component :is='currentTab'></component>
	</keep-alive>

keep-alive 的属性

• include：string、RegExp、Array,只有名称匹配的组件会被缓存
• exclude：string、RegExp、Array，任何名称匹配的组件都不会被缓存
• max：number、string，最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁

include 和 exclude prop允许组件有条件的缓存

• 二者都可以用逗号分隔字符串，正则表达式或一个数组
• 匹配首先检查组件自身的name选项

// 逗号分隔符
<keep-alive include = ' a,b'
	<component :is='view' ></component>
</keep-alive>
// 正则表达式 需要使用v-bind
<keep-alive :include = '/a|b/'>
	<component :is ='view'></view>
</keep-alive>
// 数组，需要使用v-bind
<keep-alive :include = "['a','b']">
	<component :is='view'/>
</keep-alive>

webpack的代码分包

默认的打包过程

默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接以来的，那么webpack在打包时就会将组件模块打包到一起（比如都在app.js文件中）
随着项目的不断扩大，app.js文件的内容过大，会造成首屏的渲染速度变慢
(vendors.js 里面放的是第三方包代码，比如vue.js,vue-router,axios…)

main.js

通过import 函数导入的模块，后续webpack对其进行打包的时候就会进行分包操作。import()得到的是一个promise对象

	import ("./utils/math").then((res)=>{
		res.sum(20,30)
	})

utils.js

	export const sum = function(num1,num2) {
		return (num1+num2)
	}

异步组件defineAsyncComponent

如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载(目前是可以对其进行分包处理），Vue中给我们提供了一个函数:defineAsyncComponent

defineAsyncComponent. 接收两种类型的函数

• 工厂函数，该工厂函数需要返回一个Promise对象

	import {defineAsyncComponent} from 'vue'
	const asyncCategory = defineAsyncComponent(()=>{
		import("./AsyncCategory.vue)
	})

	components:{asyncCategory}

• 接收一个对象，对异步函数进行配置(开发中较少使用)

	import Loading from './Loading.vue'
	const asyncCategory = defineAsyncComponent({
		loader:()=> import("./AsyncComponent.vue"),
		loadingComponent:Loading,//占位组件，当前组件未加载前显示
		delay:2000,//延迟，在显示loadingComponent组件之前等待多长时间
		// err : 错误信息，retry:函数，调用retry尝试重新加载
		// fail ： 函数，指示加载程序结束退出，attempts：记录尝试次数
		onError:function(err,retry,fail,attempts){
		}
	})

异步组件和suspense

目前suspense 是一个实验性的特性，是一个内置的全局组件，该组件有两个插槽

• default ： 如果default可以显示，那么显示default的内容(比如还没加载下来显示不出来）
• fallback：如果default无法显示，那么显示fallback插槽的内容

App.vue

	<template>
		<suspense>
			<template #default>
				<async-category />
			</template>
			<template #fallback>
				<loading />
			</template>
		</suspense>
	</template>
import {defineAsyncComponent} from 'vue'
const asyncCategory = defineAsyncComponent(()=>import("./asyncCategory.vue"))