一幅长文细学Vue（五）——组件高级（上）

5 组件高级（上）

摘要

​ 在本文中，我们会详细讨论watch侦听器的基本使用，并且了解vue中常用的生命周期函数、实现组件之间的数据共享，最后学习如何在vue3.x项目中全局配置axios。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码，main.js文件的代码通常不贴出，如果感兴趣可以前往代码仓库获取

作者：来自ArimaMisaki创作

5.1 watch侦听器

5.1.1 watch侦听器概述

说明：watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如，监视用户名的变化并发起请求，判断用户名是否可用。

本质：监听器的本质也是一个函数，它允许接收两个参数，即新数据和老数据。

使用：在选项式API中，我们可以使用watch选项来定义所需的侦听器。

5.1.2 watch的使用场景

场景：检测用户名是否可用

说明：监听username值的变化，并使用axios发起Ajax请求，检测当前输入的用户名是否可用。要完成这个场景，需先安装axios包。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5.1.3 侦听器选项

immediate选项：watch是懒执行的。默认情况下，组件在初次加载完毕后不会调用watch侦听器，仅当数据源发生改变时，侦听器才会触发。如果想让watch侦听器立即被调用，需要使用immediate选项。需要额外注意的是，当我们第一次使用侦听器时，旧值为undefined。

deep选项：如果我们侦听的源是对象或数组，在不使用选项的情况下我们无法使用侦听器来侦听它们的变化。使用deep选项可以强制深度遍历源，以便源在进行变更的时候触发回调。

info: {
            async handler(newVal) {
                const { data: res } = await axios.get('https://www.escook.cn/api/finduser' + newVal.username)
                console.log(res);
            },
            deep:true
        }
1
2
3
4
5
6
7

5.1.4 监听对象单个属性的变化

说明：使用deep选项会遍历数组或对象中的所有属性，如果想要监听单个属性，我们可以采用.的形式指定获取数组或对象的单个属性作为监听源。不过需要注意的是，由于使用了.的缘故，作为键的一方需要加上单引号或双引号。

5.1.5 计算属性和侦听器

说明：有很多人会搞混计算属性和侦听器。实际上，计算属性侧重于监听多个值得变化，并最终计算返回一个新值，而侦听器侧重于监听单个数据源的变化，最终执行特定的业务处理，不需要有任何返回值。

5.2 生命周期

5.2.1 组件运行的过程

组件的生命周期：组件的生命周期指的是组件从创建到湮灭的整个过程，该术语强调的是这个时间段。

5.2.2 如何监听组件的不同时刻

说明：Vue框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。另外，生命周期函数常被称为生命周期钩子。

• 当组件在内存中被创建完毕之后，会自动调用created函数
• 当组件被成功的渲染到页面上之后，会自动调用mounted函数
• 当组件被销毁完毕之后，会自动调用unmounted函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5.2.3 如何监听组件的更新

说明：一旦组件中的data数据源发生变化，vue会自动重新渲染组件的DOM结构，从而保证View视图展示的数据和Model数据源保持一致。当组件被重新渲染完毕后，会自动调用updated生命周期函数。

5.2.4 组件生命周期函数

说明：在之前学习的四个周期函数之前加上before，即可出现另外四个生命周期函数。

5.3 数据共享

5.3.1 组件之间的关系

说明：在项目开发中，组件之间的关系分为如下三种：

• 父子关系
• 兄弟关系
• 后代关系

5.3.2 父子组件

父组件向子组件共享数据：父组件使用v-bind指令来向子组件共享数据，子组件需要使用props选项来接收数据。

子组件向父组件共享数据：子组件可以通过自定义事件的方式向父组件共享数据。

父子组件之间数据双向同步：通过v-model指令来维护组件内外数据的双向同步。

5.3.3 兄弟组件

说明：兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方的包mitt来创建eventBus对象，从而实现兄弟组件之间的数据共享。

示意图：

安装mitt依赖包：npm install mitt

使用步骤：

1. 新建一个EventBus.js文件，在里面创建mitt实例，并默认导出
2. 在数据接收方的created生命周期钩子中调用mitt实例对象.on('事件名称',要接收的数据)自定义一个事件，通过事件处理函数的形参来接收数据。
3. 在数据发送方，调用bus.emit('事件名称',要发送的数据)方法触发自定义事件。

5.3.4 Prop逐级透传问题

说明：通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：

如上图在传递的过程中，可能Footer组件根本不关心这些props，但为了DeepChild的使用，它必须接收并且继续往下传递，如果组件的链路非常长，可能会影响到这条路上更多的组件，这一问题被称为prop逐级透传，我们希望避免这种情况。

5.3.5 后代组件

说明：如果仅仅只是父子关系，那么使用props和v-bind或许是一种不错的策略，但如果要接收数据的组件离发送数据的组件很远(链路很长)，使用props就会导致逐级透传问题，这时候我们可以使用provide和inject来解决这一问题。

provide选项：provide是一个函数，和data一样返回一个共享的数据对象。对于provide对象上的每一个属性，后代组件都会用其key为注入名查找期望注入的值，属性的值就是要提供的数据。

inject选项：inject是一个数组，用于接收provide提供的共享数据，根据provide返回的对象中属性的键进行查找。

5.3.6 基于Provide向下共享响应式的数据

5.3.7 vuex

说明：vuex是终极的组件之间的共享方案。在企业级的vue项目开发中，vuex可以让组件之间的数据共享变得高效、清晰、且易于维护。

5.4 全局配置axios

引入：在实际项目中，几乎每个组件都会使用axios发起数据请求，此时会遇到两个问题：

• 每个组件中都需要导入axios
• 每次发请求都需要填写完整的请求路径

说明：想要全局配置axios可以在main.js入口文件中，通过app.config.globalProperties全局挂载axios。

格式：app.config.globalProperties.$http