一. 动态组件和keep-alive
1. 背景
比如我们要做一个动态组件的切换，传统的做法是通过v-if进行判断切换，核心代码如下：
2. 动态组件
(1). 基本使用
动态组件是使用 component 组件，通过一个特殊的attribute is 来实现：
代码分享：
<template> <div> <button v-for="(item,index) in tabs" :key="index" @click="tabClick(item)" :class="{active:currentTab===item}">{{item}}</button> <!-- 方案2：动态组件Component --> <!--2.1 is属性里存放的是Components里注册的组件名称 --> <component :is="currentTab"></component> </div> </template> <script> import Home1 from './pages/Home1.vue'; import Home2 from './pages/Home2.vue'; import Home3 from './pages/Home3.vue'; export default { components: { Home1, Home2, Home3 }, data() { return { tabs: ['home1', 'home2', 'home3'], currentTab: 'home1', myAge: 20 }; }, methods: { tabClick(item) { this.currentTab = item; } } } </script>
(2). 传值给子组件 和 监听子组件事件
与普通的父子组件类似，子组件通过props接收，通过$emit对外传递。
父组件
<template> <div> <button v-for="(item,index) in tabs" :key="index" @click="tabClick(item)" :class="{active:currentTab===item}">{{item}}</button> <!-- 方案2：动态组件Component --> <!-- 2.2 传值和事件监听 在Home3组件上实现--> <component :is="currentTab" name="lmr" :age='myAge' @pageClick="pageClick"></component> </div> </template> <script> import Home1 from './pages/Home1.vue'; import Home2 from './pages/Home2.vue'; import Home3 from './pages/Home3.vue'; export default { components: { Home1, Home2, Home3 }, data() { return { tabs: ['home1', 'home2', 'home3'], currentTab: 'home1', myAge: 20 }; }, methods: { tabClick(item) { this.currentTab = item; }, pageClick(v1, v2) { console.log(v1, v2); } } } </script> <style scoped> .active { color: red; } </style>
子组件Home3
<template> <div @click="myClick1"> 我是Home3组件,{{name}}--{{age}} </div> </template> <script> export default { name:'myHome3', props: { name: { type: String, default: 'ypf' }, age: { type: Number, default: 18 } }, emits: ['pageClick'], data() { return {}; }, methods: { myClick1() { this.$emit('pageClick', 20, 30, 40); } } } </script>
3. keep-alive缓存
默认情况下，切换组件，原组件就被销毁了，再次回来会重新创建组件。
代码分享：
<!-- 方案3 keep-alive保持状态 --> <!-- 注意：不写include 默认所有都缓存，存在include时，优先匹配首先检查组件自身的 name 选项 --> <!-- 缓存生命周期测试，在Home2组件上改造 --> <keep-alive include="myHome1,myHome2"> <component :is='currentTab' name='lmr' :age='myAge' @pageClick="pageClick"></component> </keep-alive>
剖析：
4. keep-alive缓存生命周期
二. Webpack分包和异步组件
1. Webpack实现js分包
(1). 背景
默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起（比如 自己编写的一些业务都在这个app.xxxx.js中，一些三方依赖都打包在chunk-vendors.xxx.js中）
这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢；
(2). 代码分包
所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js； 这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容。
比如在mainjs入口中导入一段js代码，进行打包
// 普通导入js import {sum} from './components/11_异步组件的使用/utils/test.js'; console.log(sum(10,20));
改成分包写法，进行打包
// 分包的写法 import("./components/11_异步组件的使用/utils/test.js").then(({sum})=>{ console.log(sum(10,20)); });
2. Vue中实现异步组件
(1). 背景
A. 如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），那么Vue中给我们提供了一个函数：defineAsyncComponent。
B. defineAsyncComponent接受两种类型的参数：
类型一：工厂函数，该工厂函数需要返回一个Promise对象；
类型二：接受一个对象类型，对异步函数进行配置；
(2). 代码分享
<script>
// 同步写法
import Loading from './Loading.vue';
// 导入异步组件
import { defineAsyncComponent } from 'vue';
// 写法1
const AsyncCpn1 = defineAsyncComponent(() => import('./AsyncCpn1.vue'));
// 写法2
const AsyncCpn2 = defineAsyncComponent({
loader: () => import("./AsyncCpn2.vue"),
// 加载异步组件时要使用的组件
loadingComponent: Loading,
// 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
delay: 200,
/**
*
* @param {*} error 错误信息对象
* @param {*} retry 一个函数，用于指示当 promise 加载器 reject 时，加载器是否应该重试
* @param {*} fail 一个函数，指示加载程序结束退出
* @param {*} attempts 允许的最大重试次数
*/
onError: function(err, retry, attempts) {
}
})
export default {
components: {
AsyncCpn1,
AsyncCpn2,
Loading
},
data() {
return {};
}
}
</script>
打包后的资源文件如下图：
3. Suspense
三. 引用元素/组件($ref等)
1. $ref
某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：
(1). 在Vue开发中我们是不推荐进行DOM操作的。
(2). 这个时候，我们可以给元素或者组件绑定一个ref的attribute属性。
(1). 获取元素 或 组件
子组件代码
<template> <div> {{msg}} <p><button @click="getfather">获取父亲组件和根组件</button></p> </div> </template> <script> export default { data() { return { msg: 'hello Vue3' }; }, methods:{ getfather(){ console.log('-----------------我是子组件中业务---------------------'); // 1.获取父元素 { console.log(this.$parent); // 不建议这么用，因为一个组件会被多个父组件调用，并不是每一个父组件里都有test1属性和getInfo方法 console.log(this.$parent.test1); this.$parent.getInfo(); } // 2. 获取根元素 // { // console.log(this.$root); // console.log(this.$root.test1); // this.$root.getInfo(); // } } } } </script>