Lyk-Blog

六、组件化的额外知识补充

2022/8/25 Vue组件的生命周期组件及元素的ref属性动态组件的使用keep-alive组件异步组件组件的混入mixin

# 1、认识生命周期

  • 什么是生命周期呢？
    • 生物学上，生物生命周期指得是一个生物体在生命开始到结束周而复始所历经的一系列变化过程；
    • 每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程；
    • 在这个过程中的某一个阶段，我们可能会想要添加一些属于自己的代码逻辑（比如组件创建完后就请求一些服务器数据）；
    • 但是我们如何可以知道目前组件正在哪一个过程呢？Vue给我们提供了组件的生命周期函数；
  • 生命周期函数：
    • 生命周期函数是一些钩子函数（回调函数），在某个时间会被Vue源码内部进行回调；
    • 通过对生命周期函数的回调，我们可以知道目前组件正在经历什么阶段；
    • 那么我们就可以在该生命周期中编写属于自己的逻辑代码了；
  • 声明周期函数
    1. beforeCreate
    2. create
    3. beforeMount
    4. mounted
    5. beforeUpdate
    6. updated
    7. beforeUnmount
    8. unmounted

# 2、生命周期的流程

1.png

# 3、$refs的使用

  • Vue的api (opens new window)

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

    • 在Vue开发中我们是不推荐进行DOM操作的；
    • 这个时候，我们可以给元素或者组件绑定一个ref的attribute属性；

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

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

2.png

# 4、$parent 和 $root

  • 我们可以通过$parent来访问父组件。
  • 我们可以通过$root来获取当前组件树的根
  • 注意：在Vue3中已经移除了$children的属性，所以不可以使用了

3.png

# 5、动态组件

# 5.1.切换组件案例

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

4.png

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

# 5.2.v-if显示不同的组件

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

5.png

# 5.3.动态组件的实现

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

6.png

  • 这个currentTab的值需要是什么内容呢？
    • 全局注册：可以是通过component函数注册的组件；
    • 布局注册：在一个组件对象的components对象中注册的组件；

# 5.4.动态组件的传值

  • 如果是动态组件我们可以给它们传值和监听事件吗？
    • 也是一样的；
    • 只是我们需要将属性和监听事件放到component上来使用

7.png

# 6、keep-alive属性（缓存组件）

# 6.1.认识keep-alive

  • 我们先对之前的案例中About组件进行改造：
    • 在其中增加了一个按钮，点击可以递增的功能；
  • 比如我们将counter点到16，那么在切换到home再切换回来about时，状态是否可以保持呢？
    • 答案是否定的；
    • 这是因为默认情况下，我们在切换组件后，about组件会被销毁掉，再次回来时会重新创建组件；
  • 但是，在开发中某些情况我们希望继续保持组件的状态，而不是销毁掉，这个时候我们就可以使用一个内置组件：keep-alive。

1092d74a0936d287aa19b705f68fdc34.png

# 6.2.keep-alive属性

  • keep-alive属性 (opens new window)

  • keep-alive有一些属性：

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

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

    • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示；
    • 匹配首先检查组件自身的 name 选项；如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
    • TIP:在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。

99a673f27414ef224.png

# 7、缓存组件的生命周期activated 和 deactivated

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

10.png

# 8、Webpack的代码分包

  • 默认的打包过程：
    • 默认情况下，在构建整个组件树的过程中，因为组件和组件之间是通过模块化直接依赖的，那么webpack在打包时就会将组件模块打包到一起（比如一个app.js文件中）；
    • 这个时候随着项目的不断庞大，app.js文件的内容过大，会造成首屏的渲染速度变慢；
  • 打包时，代码的分包：
    • 所以，对于一些不需要立即使用的组件，我们可以单独对它们进行拆分，拆分成一些小的代码块chunk.js；
    • 这些chunk.js会在需要时从服务器加载下来，并且运行代码，显示对应的内容；
  • 那么webpack中如何可以对代码进行分包呢？

11.png

# 9、异步组件

# 9.1.Vue中实现异步组件

  • 如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），那么Vue中给我们提供了一个函数：defineAsyncComponent。
  • defineAsyncComponent接受两种类型的参数：
    • 类型一：工厂函数，该工厂函数需要返回一个Promise对象；
    • 类型二：接受一个对象类型，对异步函数进行配置；
  • 工厂函数类型一的写法：

12.png

# 9.2.异步组件的写法二（了解）

13.png

# 10、混入Mixin

# 10.1.认识Mixin

  • 目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。
  • 在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成：
    • Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能；
    • 一个Mixin对象可以包含任何组件选项；
    • 当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中；

# 10.2.Mixin的基本使用

14.png

# 10.3.Mixin的合并规则

  • 如果Mixin对象中的选项和组件对象中的选项发生了冲突，那么Vue会如何操作呢？
    • 这里分成不同的情况来进行处理；
  • 情况一：如果是data函数的返回值对象
    • 返回值对象默认情况下会进行合并；
    • 如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据；
  • 情况二：如何生命周期钩子函数
    • 生命周期的钩子函数会被合并到数组中，都会被调用；
  • 情况三：值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。
    • 比如都有methods选项，并且都定义了方法，那么它们都会生效；
    • 但是如果对象的key相同，那么会取组件对象的键值对；

# 10.4.全局混入Mixin

  • 如果组件中的某些选项，是所有的组件都需要拥有的，那么这个时候我们可以使用全局的mixin：
    • 全局的Mixin可以使用 应用app的方法 mixin 来完成注册；
    • 一旦注册，那么全局混入的选项将会影响每一个组件；

15.png

最后更新时间: 2022/09/21, 01:34:25

七、Vue3 Composition API (一)

彩虹
周杰伦