Vue3

让我再睡会儿呗

已于 2022-05-27 22:51:52 修改

阅读量908

点赞数

文章标签： vue

于 2022-05-13 19:45:50 首次发布

本文链接：https://blog.csdn.net/weixin_46041137/article/details/124741140

版权

本文深入探讨Vue3组件中的watch侦听器，包括其基本用法、immediate和deep选项，以及组件生命周期的不同阶段。还讲解了组件间的数据共享策略，如父子组件、兄弟组件和Vuex。同时，涵盖了全局配置axios的方法以优化请求管理。

摘要由CSDN通过智能技术生成

( 注：该笔记部分内容与Vue2重复，权当复习

4.1.3 使用 watch 检测用户名是否可用

4.4 vue 3.x中全局配置axios

四、组件高级(上)

4.1 watch侦听器

4.1.1 什么是 watch 侦听器

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

4.1.2 watch 侦听器的基本语法

开发者需要在 watch 节点下，定义自己的侦听器。实例代码如下：

4.1.3 使用 watch 检测用户名是否可用

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

watch: {
// 监听 username 值的变化
async username(newVal) {
if (newVal === '') return
// 使用 axios 发起请求，判断用户名是否可用
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
} }

4.1.4 immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。示例代码如下：

watch: {
username: {
// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
handler: async function (newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
// 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
immediate: true
} }

4.1.5 deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项进行深度侦听，代码示例如下：

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

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

4.1.7 计算属性 vs 侦听器

计算属性和侦听器侧重的应用场景不同：

计算属性侧重于监听多个值的变化，最终计算并返回一个新值
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值

4.2 组件的生命周期

4.2.1 组件运行的过程

组件的生命周期指的是：组件从创建 -> 运行（渲染） -> 销毁的整个过程，强调的是一个时间段。

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

vue 框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。

例如：

① 当组件在内存中被创建完毕之后，会自动调用 created 函数

② 当组件被成功的渲染到页面上之后，会自动调用 mounted 函数

③ 当组件被销毁完毕之后，会自动调用 unmounted 函数

4.2.3 如何监听组件的更新

当组件的 data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证 View 视图展示的数据和Model 数据源保持一致。

当组件被重新渲染完毕之后，会自动调用 updated 生命周期函数。

4.2.4 组件中主要的生命周期函数

注意：在实际开发中，created 是最常用的生命周期函数！

4.2.5 组件中全部的生命周期函数

疑问：为什么不在 beforeCreate 中发 ajax 请求初始数据？在beforeCreate中，组件的props、data和methods尚未被创建，都处于不可用状态

4.2.6 完整的生命周期图示

可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：

4.3 组件之间的数据共享

4.3.1 组件之间的关系

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

① 父子关系

② 兄弟关系

③ 后代关系

4.3.2 父子组件之间的数据共享

父子组件之间的数据共享又分为：

① 父 -> 子共享数据

② 子 -> 父共享数据

③ 父 <-> 子双向数据同步

1. 父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。父组件通过 v-bind 属性绑定向子组件共享数据。同时，子组件需要使用 props 接收数据。示例代码如下：

2. 子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下：

3. 父子组件之间数据的双向同步

父组件在使用子组件期间，可以使用 v-model 指令维护组件内外数据的双向同步：

4.3.3 兄弟组件之间的数据共享

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

1. 安装 mitt 依赖包

在项目中运行如下的命令，安装 mitt 依赖包：

2. 创建公共的 EventBus.js 模块

在项目中创建公共的 eventBus.js 模块如下：

3. 在数据接发送方触发事件

在数据发送方，调用 bus.emit('事件名称', 要发送的数据) 方法触发自定义事件。示例代码如下：

4. 在数据接收方自定义事件

在数据接收方，调用 bus.on('事件名称', 事件处理函数) 方法注册一个自定义事件。示例代码如下：

在 vue2.x 中，兄弟组件之间数据共享的方案也是 EventBus，但与vue3.x有所不同：

EventBus 的使用步骤：

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法（该方法需要写到 created生命周期函数中）注册一个自定义事件