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

作者: Imkata | 来源:发表于2022-04-30 20:55 被阅读0次

切换组件案例

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

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

v-if显示不同的组件

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

动态组件的实现

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

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

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

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

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

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 允许组件有条件地缓存，二者都可以用逗号分隔字符串、正则表达式或一个数组来表示，匹配首先检查组件自身的 name 属性。

缓存组件的生命周期

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

Webpack的import函数分包

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

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

所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js，这些chunk.js会在需要时从服务器加载下来，并且运行代码。

通过import函数导入的模块，后续webpack对其进行打包的时候就会进行分包的操作，也就是会打包成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:0, 
  //定义组件是否可以挂起, 默认true
  suspensible:true,
  /** 异步组件加载失败的回调函数
   * err: 错误信息,
   * retry: 函数, 调用retry尝试重新加载
   * fail: 函数, 指示加载程序结束退出
   * attempts: 记录尝试的次数
   */
  onError: function(err, retry, fail, attempts) {
  }
})

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

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

异步组件和Suspense结合使用

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

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>

组件的v-model

前面我们在input中可以使用v-model来完成双向绑定，这样往往会非常方便，因为v-model默认帮助我们完成了两件事：v-bind:value的数据绑定和@input的事件监听。

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

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

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

<!-- 组件上使用v-model -->
<hy-input v-model="message"></hy-input>
<hy-input :modelValue="message" @update:modelValue="message = $event"></hy-input>

我们会发现和input元素不同的只是属性的名称和事件触发的名称而已。

组件v-model的实现

那么，为了我们的HyInput组件可以正常的工作，这个组件内的 <input> 必须：
① 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上；
② 在其 input 事件被触发时，将新的值通过自定义的 update:modelValue 事件抛出；

HyInput.vue的组件代码如下：

组件使用的时候：

通过computed实现

我们依然希望在组件内部按照双向绑定的做法去完成，应该如何操作呢？
我们可以使用计算属性的setter和getter来完成。

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>

以后我们封装高级组件的时候就会经常在组件上使用v-model了。