Hello,又见面了,我是渔戈!

今天我们来讲讲动态组件、异步组件以及生命周期和 v-model

那就先来用一个案例引入,再来展开讲讲实现方法

1.切换组件案例

比如我们现在想要实现了一个功能：

• 点击一个 tab-bar，切换不同的组件显示；

这个案例我们可以通过两种不同的实现思路来实现：

• 方式一：通过 v-if 来判断，显示不同的组件

• 方式二：动态组件的方式；

1.1v-if 显示不同的组件

我们可以先通过 v-if 来判断显示不同的组件:

1.2 动态组件的实现

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

这个 currentTab 的值需要是什么内容呢？

• 可以是通过 component 函数注册的组件；

• 在一个组件对象的 components 对象中注册的组件；

1.3 动态组件的传值

如果是动态组件我们可以给它们传值和监听事件吗？

• 也是一样的；

• 只是我们需要将属性和监听事件放到 component 上来使用；

1.4 认识 keep-alive

我们先对之前的案例中 About 组件进行改造：

• 在其中增加了一个按钮，点击可以递增的功能；

比如我们将 counter 点到 10，那么在切换到 home 再切换回来 about 时，状态是否可以保持呢？

• 答案是否定的；

• 这是因为默认情况下，我们在切换组件后，about 组件会被销毁掉，再次回来时会重新创建组件；

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

1.5 keep-alive 属性

keep-alive 有一些属性：

• include - string | RegExp | Array。只有名称匹配的组件会被缓存；

• exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存；

• max - number | string。最多可以缓存多少组件实例，一旦达到这个数字，那么缓存组件中最近没有被访问的实例会被销毁；

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

• 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；

• 匹配首先检查组件自身的 name 选项；

1.6 缓存组件的生命周期

对于缓存的组件来说，再次进入时，我们是不会执行 created 或者 mounted 等生命周期函数的：

• 但是有时候我们确实希望监听到何时重新进入到了组件，何时离开了组件；

• 这个时候我们可以使用 activated 和 deactivated 这两个生命周期钩子函数来监听

1.7 Webpack 的代码分包

默认的打包过程：

• 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么 webpack 在打包时就会将组件模块打包到一起（比如一个 app.js 文件中）；

• 这个时候随着项目的不断庞大，app.js 文件的内容过大，会造成首屏的渲染速度变慢；

打包时，代码的分包：

• 所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块 chunk.js；

• 这些 chunk.js 会在需要时从服务器加载下来，并且运行代码，显示对应的内容；

那么 webpack 中如何可以对代码进行分包呢？

2.Vue 中实现异步组件

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

defineAsyncComponent 接受两种类型的参数：

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

• 类型二：接受一个对象类型，对异步函数进行配置；

工厂函数类型一的写法：

异步组件的写法二:

2.1 异步组件和 Suspense

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

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

• default：如果 default 可以显示，那么显示 default 的内容；

• fallback：如果 default 无法显示，那么会显示 fallback 插槽的内容；

3.$refs、$parent 和 $root

某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：

• 在 Vue 开发中我们是不推荐进行 DOM 操作的；

• 这个时候，我们可以给元素或者组件绑定一个 ref 的 attribute 属性；

组件实例有一个 $refs 属性：

• 它一个对象 Object，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

我们可以通过 $parent 来访问父元素。

HelloWorld.vue 的实现：

• 这里我们也可以通过 $root 来实现，因为 App 是我们的根组件；

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

4.认识生命周期

什么是生命周期呢？

• 每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程；

• 在这个过程中的某一个阶段，用于可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）；

• 但是我们如何可以知道目前组件正在哪一个过程呢？Vue 给我们提供了组件的生命周期函数；

生命周期函数：

• 生命周期函数是一些钩子函数，在某个时间会被 Vue 源码内部进行回调；

• 通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段；

• 那么我们就可以在该生命周期中编写属于自己的逻辑代码了；

4.1 生命周期的流程

5. 组件的 v-model

前面我们在 input 中可以使用 v-model 来完成双向绑定

• 这个时候往往会非常方便，因为 v-model 默认帮助我们完成了两件事；v-bind:value 的数据绑定和 @input 的事件监听；

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

• 也是可以的，vue 也支持在组件上使用 v-model；

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

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

5.1 组件 v-model 的实现

那么，为了我们的 MyInput 组件可以正常的工作，这个组件内的 <input> 必须：

• 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上；

• 在其 input 事件被触发时，将新的值通过自定义的 update:modelValue 事件抛出；

MyInput.vue 的组件代码如下：

5.2 computed 实现

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

5.3 绑定多个属性

我们现在通过 v-model 是直接绑定了一个属性，如果我们希望绑定多个属性呢？

• 也就是我们希望在一个组件上使用多个 v-model 是否可以实现呢？

• 我们知道，默认情况下的 v-model 其实是绑定了 modelValue 属性和 @update:modelValue 的事件；

• 如果我们希望绑定更多，可以给 v-model 传入一个参数，那么这个参数的名称就是我们绑定属性的名称；

注意：这里我是绑定了两个属性的

v-model:title 相当于做了两件事：

• 绑定了 title 属性；

• 监听了 @update:title 的事件；

本次的分享就到这里，如果本章内容对你有所帮助的话欢迎点赞+收藏。文章有不对的地方欢迎指出，有任何疑问都可以在评论区留言。希望大家都能够有所收获，大家一起探讨、进步！