本文整理来自深入Vue3+TypeScript技术栈-coderwhy大神新课，只作为个人笔记记录使用，请大家多支持王红元老师。

切换组件案例

比如我们现在想要实现了一个功能：点击一个tab-bar，切换不同的组件显示。

这个案例我们可以通过两种不同的实现思路来实现：
方式一：通过v-if来判断，显示不同的组件；
方式二：动态组件的方式；

v-if显示不同的组件

我们可以先通过 v-if 来判断显示不同的组件，这个可以使用我们之前讲过的知识来实现：

动态组件的实现

动态组件是使用 component 组件，通过一个特殊的属性 is 来实现：

注意1：这个is的值可以是通过app.component函数注册的全局组件，也可以是在一个组件对象的components属性中注册的局部组件。

虽然注册的时候是大写，在<component :is="currentTab"</component>里面写成小写是没问题的，因为在模板中都是可以转成-连接符的样式。

动态组件的传值和监听事件

动态组件的传值和监听事件和父子组件之间的通信是一模一样的，只需要将动态组件当成一个子组件即可，只需要将属性和监听事件放到component上来使用即可。

比如：父组件通过name、age属性给子组件传值，子组件通过$emit触发事件，父组件通过监听pageClick事件得到子组件传递的值。

注意：这里:age加冒号，传过去才是数字，如果不加冒号，传过去是字符串'18'

关于动态组件，我们在Vue前端路由这篇文章里面也接触过。

keep-alive

我们先对之前的案例中About组件进行改造：在其中增加了一个按钮，有点击按钮可以递增的功能。

比如我们将counter点到10，那么在切换到home再切换回来about时，状态是否可以保持呢？答案是否定的，这是因为默认情况下，我们在切换组件后，about组件会被销毁掉，再次回来时会重新创建组件。

但是，在开发中某些情况我们希望继续保持组件的状态，而不是销毁掉，这个时候我们就可以使用一个内置组件：keep-alive。

keep-alive有一些属性：

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

include 和 exclude 允许组件有条件地缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

注意2：include和exclude匹配首先检查组件自身的 name 属性，如下Home.vue：

<template>
  <div @click="divClick">
    Home组件: {{name}} - {{age}}
  </div>
</template>

<script>
  export default {
    // 组件自己的名字
    name: "home",  
    props: {
      name: {
        type: String,
        default: ""
      },
      age: {
        type: Number,
        default: 0
      }
    },
    emits: ["pageClick"],
    methods: {
      divClick() {
        this.$emit("pageClick");
      }
    }
  }
</script>

<style scoped>

</style>

缓存组件的生命周期

对于缓存的组件来说，再次进入时，我们是不会执行created或者mounted等生命周期函数的。但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件，这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听。

总结：也就是说，除了beforeCreate、create、beforeMounted、mounted、beforeUpdate、update、beforeDestoryed、destoryed，对于缓存组件，我们还有activated和deactivated。

Webpack的import()函数分包

默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起（比如一个app.xxx.js文件中），随着项目的不断庞大，app.xxx.js文件的内容过大，会造成首屏的渲染速度变慢。

比如main.js依赖App.vue，App.vue依赖Home.vue，Home.vue又依赖math.js，最后它们都会被打包到一个文件中。

app.后面是文件的hash值，hash值和文件变化有关系，.map文件是映射文件，chunk-vendors是第三方的包。

所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，通过import()函数导入的模块，后续webpack对其进行打包的时候就会进行分包的操作，也就是会打包成一个一个chunk.js，这些chunk.js会在需要时从服务器加载下来，并且运行代码。

// 以前我们这么导入模块, 这样模块的代码会被打包到app.js里面
// import {sum} from './12_异步组件的使用/utils/math';
// console.log(sum(20, 30));

// 通过import函数导入的模块, 后续webpack对其进行打包的时候就会进行分包的操作, 也就是会打包成chunk.js
import("./12_异步组件的使用/utils/math").then((res) => {
  console.log(res.sum(20, 30))
})

Vue中实现异步组件

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

defineAsyncComponent接受两种类型的参数：
类型一：工厂函数，该工厂函数需要返回一个Promise对象；
类型二：接受一个对象类型，对异步函数进行配置；

类型一工厂函数的写法：上面我们知道了import()函数会返回一个Promise对象，所以我们直接写一个工厂箭头函数，然后把返回的Promise对象当做defineAsyncComponent函数的参数即可。

// import AsyncCategory from './AsyncCategory.vue';
const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))
export default {
  components: {
    AsyncCategory
  }
}

类型二对象类型的写法：使用对象类型的方式可以进行更详细的配置。

const AsyncCategory = defineAsyncComponent({
  //也就是上面的工厂函数
  loader: () => import("./AsyncCategory.vue"),
  //加载过程显示的组件
  loadingComponent: Loading,
  //加载失败显示的组件
  errorComponent: Error,
  // 在显示loadingComponent组件之前, 等待多长时间, 默认200ms
  delay: 2000,
  //加载组件的超时时间,如果超过这个值,则显示错误组件, 默认Infinity永不超时, 单位ms
  timeout:5000, 
  //定义组件是否可以挂起, 默认true
  suspensible:true,
  /** 异步组件加载失败的回调函数
   * err: 错误信息,
   * retry: 函数, 调用retry尝试重新加载
   * fail: 函数, 指示加载程序结束退出
   * attempts: 记录尝试的次数
   */
  onError: function(err, retry, fail, attempts) {
  }
})

这样写之后AsyncCategory就是一个异步组件了，在打包的时候webpack也会对其进行分包处理，然后等到真正需要显示这个组件的时候才去服务器上下载组件代码，然后再显示。

一般开发中我们很少如上这么用，因为我们以后会学到路由，以后基本上都是路由懒加载组件。

Suspense和异步组件结合使用

注意：目前（2021-06-08）Suspense是一个实验性的特性，API随时可能会修改。

suspense n. 悬念悬而未决;

Suspense是一个内置的全局组件，该组件有两个插槽：

default：如果default可以显示，那么显示default的内容；
fallback：如果default无法显示或者还没显示，那么会显示fallback插槽的内容；

实际项目中异步组件是服务端获取的，有可能比较慢，所以我们可以使用Suspense组件，优先显示默认内容，如果默认内容加载失败或者还没显示，则显示fallback插槽的内容，如下：

<suspense>
  <template #default>
    <async-category></async-category>
  </template>
  <template #fallback>
    <loading></loading>
  </template>
</suspense>

$refs的使用

在Vue开发中我们是不推荐进行DOM操作的，但是某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例，这个时候，我们可以给元素或者组件绑定一个ref的属性。

组件实例有一个$refs属性，它是一个持有注册过 ref 属性的所有 DOM 元素和组件实例的对象。

<template>
  <div>
    <!-- 绑定到一个元素上 -->
    <h2 ref="title">哈哈哈</h2>
    <!-- 绑定到一个组件实例上 -->
    <nav-bar ref="navBar"></nav-bar>
    <button @click="btnClick">获取元素或组件</button>
  </div>
</template>

<script>
  import NavBar from './NavBar.vue';

  export default {
    components: {
      NavBar
    },
    data() {
      return {
        names: ["abc", "cba"]
      }
    },
    methods: {
      btnClick() {
        //获取dom元素
        console.log(this.$refs.title);
        //获取组件数据
        console.log(this.$refs.navBar.message);
        //调用组件方法
        this.$refs.navBar.sayHello();
        //获取组件的根元素通过$el
        console.log(this.$refs.navBar.$el);
      }
    }
  }
</script>
<style scoped>
</style>

$parent和$root

在子组件中，我们可以通过$parent来访问父元素，通过$root来访问根组件。项目中使用的比较少，因为会导致组件耦合性太强。

注意：在Vue3中已经移除了$children的属性，所以不可以使用了。

认识生命周期

什么是生命周期呢？每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程，在这个过程中的某一个阶段，我们可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）。但是我们如何可以知道目前组件正在哪一个过程呢？Vue给我们提供了组件的生命周期函数。

生命周期函数是一些钩子函数，在某个时间会被Vue源码内部进行回调，通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段，那么我们就可以在该生命周期中编写属于自己的逻辑代码了。

生命周期的流程

<template>
  <div>
    <h2 ref="title">{{message}}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello Home"
      }
    },
    methods: {
      changeMessage() {
        this.message = "你好啊, 李银河"
      }
    },
    beforeCreate() {
      console.log("home beforeCreate");
    },
    created() {
      console.log("home created");
    },
    beforeMount() {
      console.log("home beforeMount");
    },
    mounted() {
      console.log("home mounted");
    },
    beforeUpdate() {
      console.log(this.$refs.title.innerHTML);
      console.log("home beforeUpdate");
    },
    updated() {
      console.log(this.$refs.title.innerHTML);
      console.log("home updated");
    },
    beforeUnmount() {
      console.log("home beforeUnmount");
    },
    unmounted() {
      console.log("home unmounted");
    }
  }
</script>
<style scoped>
</style>

html自带表单上使用v-model

以前我们使用v-model都是在html自带的表单上使用的，在vue2和vue3中它们的使用都是一样的。

<input v-model="message">
<!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">

组件上使用v-model，vue2和vue3的区别

用在组件上(vue2)

v-model 只能使用一次
默认传递 vulue属性，接受 input 事件
默认传递的属性和事件可通过 model 选项进行修改

用在组件上(vue3)

v-model 只能使用一次，但可以在v-model后添加参数可使用多次
默认传递 modelValue 属性，接受 update:modelValue 事件，当在v-model后添加参数时如v-model:myPropName,则传递为 myPropName 属性，接受 update:myPropName事件
默认传递的属性和事件无法修改，必须是modelValue 和 update:modelValue

vue2中 .sync 与 v-model的区别

相同点： 都是语法糖，都可以实现父子组件数据的双向绑定

不同点：

v-model 背后是 value 属性和 input 事件
myPropName.sync 背后是 myPropName 属性和 update:myPropName 事件
在组件上 v-model 只可使用一次，.sync可以有多个
注意：vue3中去除了 .sync修饰符，但把相应功能合并到了 v-model 上，所以在 vue3 中，v-model 可以使用多次

由于vue2用的不多，具体可参考v-model在vue2与vue3中的区别

vue3组件上使用v-model

如果我们现在封装了一个组件，其他地方在使用这个组件时，是否也可以使用v-model来同时完成这两个功能呢？也是可以的，vue也支持在组件上使用v-model。

当我们在组件上使用的时候，等价于如下的操作：

<!-- 组件上使用v-model -->
<!-- 相当于如下代码 -->
<CustomInput v-model="searchText"></CustomInput>
<CustomInput :modelValue="searchText" @update:modelValue="searchText = $event" />

注意：直接在input上使用v-model，传过来的是$event，所以我们要使用$event.target.value拿到值，但是组件上使用v-model拿到的$event就是新的值，直接使用就好。

组件v-model的实现

要让这个例子实际工作起来，<CustomInput> 组件内部需要做两件事：

将内部原生 <input> 元素的 value attribute 绑定到 modelValue prop
当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

这里是相应的代码：

<!-- CustomInput.vue -->
<template>
   <div>
      <input :value="modelValue" @input="btnClick">
   </div>
</template>

<script>
  export default {
    props: {
      modelValue: String
    },
    emits: ["update:modelValue"],
    methods: {
      btnClick(event) {
        this.$emit("update:modelValue", event.target.value);
      }
    }
  }
</script>

现在 v-model 可以在这个组件上正常工作了：

<CustomInput v-model="searchText" />

通过computed实现

如果组件内部的input我们不想写<input :value="modelValue" @input="btnClick">这一长串代码，想直接使用v-model，那也是可以的。

可以使用一个同时具有 getter 和 setter 的 computed 属性。get 方法需返回 modelValue prop，而 set 方法需触发相应的事件：

<!-- CustomInput.vue -->

<template>
    <!-- 
    绑定到props中是不对的,因为根据单向数据流原则,外面传进来的值只使用不修改，
    而且就算你绑定了modelValue，里面修改了外面也不会变，因为你没有发送$emit告诉外面
    -->
    <!-- <input v-model="modelValue"> -->
  <input v-model="value" />
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  computed: {
    value: { // 这个名字是自己起的，可以随便是什么
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

v-model绑定多个属性

我们现在通过v-model是直接绑定了一个属性，如果我们希望绑定多个属性呢？也就是我们希望在一个组件上使用多个v-model是否可以实现呢？

我们知道，默认情况下的v-model其实是绑定了 modelValue 属性和 @update:modelValue 的事件，如果我们希望绑定更多，可以给v-model传入一个参数，那么这个参数的名称就是我们绑定属性的名称。这里我是绑定了两个属性的：

<!-- 绑定两个v-model -->
<hy-input v-model="message" v-model:title="title"></hy-input>

v-model:title相当于做了两件事：
① 绑定了title属性；
② 监听了@update:title的事件；

HyInput.vue文件代码如下：

<template>
  <div>
    <input v-model="value">
    <input v-model="why">
  </div>
</template>

<script>
  export default {
    props: {
      modelValue: String,
      title: String 
    },
    emits: ["update:modelValue", "update:title"],
    computed: {
      value: {
        set(value) {
          this.$emit("update:modelValue", value);
        },
        get() {
          return this.modelValue;
        }
      },
      why: {
        set(why) {
          this.$emit("update:title", why);
        },
        get() {
          return this.title;
        }
      }
    }
  }
</script>
<style scoped>
</style>

其实就相当于将modelValue换成title。以后我们封装高级组件的时候就会经常在组件上使用v-model了。

封装组件如何使用v-model

上面的v-model绑定多个属性也只是在外面绑定多个值，如果我们想在外面只绑定一个对象，那怎么办呢？

其实很简单，我们使用v-model的本质就可以了：

比如pageSearch.vue使用了hyForm.vue，hyForm.vue里面又有好几个输入框，我们想在使用hyForm.vue的时候给它绑定一个对象，然后这个对象的每个属性绑定到hyForm.vue里面的好几个输入框上。

pageSearch.vue文件：

// searchFormConfig有个field属性，用来执行绑定到哪个输入框上
// formData就是双向绑定的对象
<hy-form v-bind="searchFormConfig" v-model="formData">

hyForm.vue文件：

<el-input
  :model-value="modelValue[`${item.field}`]"
  @update:modelValue="handleValueChange($event, item.field)"
 />
 
emits: ['update:modelValue'],

const handleValueChange = (value: any, field: string) => {
 // 触发update:modelValue事件,将整个对象传递给page-search.vue
 // 后面的[field]: value是当前已经改变的值,会覆盖原始的值
 emit('update:modelValue', { ...props.modelValue, [field]: value })
}

这样就实现了将多个输入框的值，绑定到外面的一个对象上。

Vue3组件化（三）动态组件、异步组件、生命周期、组件的v-model