《Vue3实战教程》5：响应式基础

如果您有疑问，请观看视频教程《Vue3实战教程》

响应式基础​

API 参考

本页和后面很多页面中都分别包含了选项式 API 和组合式 API 的示例代码。现在你选择的是 组合式 API。你可以使用左侧侧边栏顶部的“API 风格偏好”开关在 API 风格之间切换。

声明响应式状态​

ref()​

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

js

import { ref } from 'vue'

const count = ref(0)

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

js

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

参考：为 refs 标注类型 

要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：

js

import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

template

<div>{{ count }}</div>

注意，在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)。

你也可以直接在事件监听器中改变一个 ref：

template

<button @click="count++">
  {{ count }}
</button>

对于更复杂的逻辑，我们可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开：

js

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      count,
      increment
    }
  }
}

然后，暴露的方法可以被用作事件监听器：

template

<button @click="increment">
  {{ count }}
</button>

这里是 Codepen 上的例子，没有使用任何构建工具。

<script setup>​

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件 (SFC) 来避免这种情况。我们可以使用 <script setup> 来大幅度地简化代码：

vue

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

在演练场中尝试一下

<script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 JavaScript 函数——它自然可以访问与它一起声明的所有内容。

TIP

在指南的后续章节中，我们基本上都会在组合式 API 示例中使用单文件组件 + <script setup> 的语法，因为大多数 Vue 开发者都会这样使用。

如果你没有使用单文件组件，你仍然可以在 setup() 选项中使用组合式 API。

为什么要使用 ref？​

你可能会好奇：为什么我们需要使用带有 .value 的 ref，而不是普通的变量？为了解释这一点，我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。

当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。

在标准的 JavaScript 中，检测普通变量的访问或修改是行不通的。然而，我们可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。从概念上讲，你可以将 ref 看作是一个像这样的对象：

js

// 伪代码，不是真正的实现
const myRef = {
  _value: 0,
  get value() {
    track()
    return this._value
  },
  set value(newValue) {
    this._value = newValue
    trigger()
  }
}

另一个 ref 的好处是，与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。

该响应性系统在深入响应式原理章节中有更详细的讨论。

深层响应性​

Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如 Map。

Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到：

js

import { ref } from 'vue'

const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

非原始值将通过 reactive() 转换为响应式代理，该函数将在后面讨论。

也可以通过 shallow ref 来放弃深层响应性。对于浅层 ref，只有 .value 的访问会被追踪。浅层 ref 可以用于避免对大型数据的响应性开销来优化性能、或者有外部库管理其内部状态的情况。

：

  • 减少大型不可变数据的响应性开销
  • 与外部状态系统集成

DOM 更新时机​

当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API：

js

import { nextTick } from 'vue'

async function increment() {
  count.value++
  await nextTick()
  // 现在 DOM 已经更新了
}

reactive()​

还有另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

js

import { reactive } from 'vue'

const state = reactive({ count: 0 })

参考：为 reactive() 标注类型 

在模板中使用：

template

<button @click="state.count++">
  {{ state.count }}
</button>

响应式对象是 JavaScript 代理，其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。

reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装。当 ref 的值是一个对象时，ref() 也会在内部调用它。与浅层 ref 类似，这里也有一个 shallowReactive() API 可以选择退出深层响应性。

Reactive Proxy vs. Original​

值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：

js

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。

为保证访问代理的一致性，对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身：

js

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

这个规则对嵌套对象也适用。依靠深层响应性，响应式对象内的嵌套对象依然是代理：

js

const proxy = reactive({})

const raw = {}
proxy.nested = raw

console.log(proxy.nested === raw) // false

reactive() 的局限性​

reactive() API 有一些局限性：

  1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

  2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

    js 
    let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })

  3. 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：

    js 
    const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

由于这些限制，我们建议使用 ref() 作为声明响应式状态的主要 API。

额外的 ref 解包细节​

作为 reactive 对象的属性​

一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性：

js

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 0

state.count = 1
console.log(count.value) // 1

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：

js

const otherCount = ref(2)

state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1

只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。

数组和集合的注意事项​

与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时，它不会被解包：

js

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

在模板中解包的注意事项​

在模板渲染上下文中，只有顶级的 ref 属性才会被解包。

在下面的例子中，count 和 object 是顶级属性，但 object.id 不是：

js

const count = ref(0)
const object = { id: ref(1) }

因此，这个表达式按预期工作：

template

{{ count + 1 }}

...但这个不会：

template

{{ object.id + 1 }}

渲染的结果将是 [object Object]1，因为在计算表达式时 object.id 没有被解包，仍然是一个 ref 对象。为了解决这个问题，我们可以将 id 解构为一个顶级属性：

js

const { id } = object

template

{{ id + 1 }}

现在渲染的结果将是 2。

另一个需要注意的点是，如果 ref 是文本插值的最终计算值 (即 {{ }} 标签)，那么它将被解包，因此以下内容将渲染为 1：

template

{{ object.id }}

该特性仅仅是文本插值的一个便利特性，等价于 {{ object.id.value }}。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/940261.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

黑马Java面试教程_P8_并发编程

黑马Java面试教程_P8_并发编程

系列博客目录 文章目录 系列博客目录前言1.线程的基础知识1.1 线程和进程的区别&#xff1f;难2频3面试文稿 1.2 并行和并发有什么区别&#xff1f; 难1频1面试文稿 1.3 创建线程的四种方式 难2频4面试文稿 1.4 runnable 和 callable 有什么区别 难2频3面试文稿 1.5 线程的 run…
阅读更多...
谷歌浏览器的扩展市场使用指南

谷歌浏览器的扩展市场使用指南

谷歌浏览器的扩展市场为用户提供了丰富多样的功能扩展&#xff0c;可以大幅提升浏览体验。本文将为你详细介绍如何使用谷歌浏览器的扩展市场&#xff0c;包括安装、管理和一些推荐的无障碍工具、图标重置方法和便捷操作技巧。&#xff08;本文由https://chrome.py010.cn/的作者…
阅读更多...
线程知识总结（一）

线程知识总结（一）

1、概述 1.1 进程与线程 进程是程序运行时&#xff0c;操作系统进行资源分配的最小单位&#xff0c;包括 CPU、内存空间、磁盘 IO 等。从另一个角度讲&#xff0c;进程是程序在设备&#xff08;计算机、手机等&#xff09;上的一次执行活动&#xff0c;或者说是正在运行中的程…
阅读更多...
【优选算法】Prefix-Kage：前缀和的算法影（上）

【优选算法】Prefix-Kage：前缀和的算法影（上）

文章目录 1.概念解析2.代码实现2.1【模版】前缀和&#xff08;一维&#xff09;2.1.1 原理2.1.2 代码实现 2.2【模版】前缀和&#xff08;二维&#xff09;2.2.1 原理2.2.2 代码实现 希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力&#xff01; 本篇是优选算…
阅读更多...
CVE-2024-32709 WordPress —— Recall 插件存在 SQL 注入漏洞

CVE-2024-32709 WordPress —— Recall 插件存在 SQL 注入漏洞

漏洞描述 WordPress 是一款免费开源的内容管理系统，适用于各类网站，包括个人博客、电子商务系统、企业网站。其插件 WP-Recall 的 account 存在 SQL 注入漏洞，攻击者可以通过该漏洞获取数据库敏感信息。 WP-Recall 版本 <= 16.26.5 漏洞复现 搭建环境、安装插件、完成…
阅读更多...
网络安全概论——虚拟专网VPN技术

网络安全概论——虚拟专网VPN技术

一、VPN概述 1、VPN的概念 所谓虚拟专网&#xff08;Virtual Private Network VPN&#xff09;是指将物理上分布在不同地点的网络通过公用网络连接而构成逻辑上的虚拟子网&#xff0c;它采用认证、访问控制、机密性、数据完整性等安全机制在公用网络上构建专用网络。 如何理…
阅读更多...
mobilenetv2-inceptionv3-resnet50三大模型对比实现人脸识别反欺诈系统【带UI界面】

mobilenetv2-inceptionv3-resnet50三大模型对比实现人脸识别反欺诈系统【带UI界面】

完整项目包获取→点击文章末尾名片&#xff01; 关于数据集&#xff1a;超大规模人脸欺诈数据集。共70多G。 关于模型对比&#xff1a; inceptionv3&#xff1a; mobilenetv2&#xff1a; resnet50&#xff1a; 关于系统&#xff1a; 界面&#xff1a;
阅读更多...
十一、e2studio VS STM32CubeIDE之宏函数展开

十一、e2studio VS STM32CubeIDE之宏函数展开

目录 一、概述/目的 二、复杂宏函数举例 三、编译-预处理 四、stm32cubeide和e2studio的预处理 五、source insight和vscode 一、概述/目的 复杂宏函数如何快速展开 二、复杂宏函数举例 #define R_BSP_MODULE_START(ip, channel) {FSP_CRITICAL_SECTION_DEFI…
阅读更多...
FreeRTOS的任务调度

FreeRTOS的任务调度

1.启动任务调度器 vTaskStartScheduler void vTaskStartScheduler( void ) { BaseType_t xReturn;/* Add the idle task at the lowest priority. */#if ( INCLUDE_xTaskGetIdleTaskHandle 1 ){/* Create the idle task, storing its handle in xIdleTaskHandle so it canbe …
阅读更多...
【Java基础面试题024】Java中包装类型和基本类型的区别是什么？

【Java基础面试题024】Java中包装类型和基本类型的区别是什么？

回答重点 基本类型&#xff1a; Java中有8种基本数据类型&#xff08;byte、short、int、long、float、double、char、boolean&#xff09;他们是直接存储数值的变量&#xff0c;位于栈上&#xff08;局部变量在栈上、成员变量在堆上&#xff0c;静态字段/类在方法区&#xf…
阅读更多...
SpringBoot3+Vue3开发在线考试系统

SpringBoot3+Vue3开发在线考试系统

项目介绍 项目分为3种角色&#xff0c;分别为&#xff1a;超级管理员、老师、学生。超级管理员&#xff0c;负责系统的设置、角色的创建、菜单的管理、老师的管理等功能&#xff0c;也可以叫做系统管理员&#xff1b;老师角色&#xff0c;负责系统业务的管理&#xff0c;包括学…
阅读更多...
第3节 测试套件数据驱动

第3节 测试套件数据驱动

创建Excel、 CSV测试数据 1. 从主菜单中选择 File > New > Test Data。将显示新的测试数据对话框。输入测试数据的名称并选择数据类型作为Excel File/ CSV File 。单击OK。 2. 浏览到要导入Katalon Studio的Excel File, 选择Excel中的sheetName&#xff0c;或者CSV文件…
阅读更多...
跨站点请求伪造（Cross Sites Request Forgery）类漏洞攻击方式与防御措施｜软件安全测试技术系列

跨站点请求伪造（Cross Sites Request Forgery）类漏洞攻击方式与防御措施｜软件安全测试技术系列

本系列文章分享JavaScript语言常见的安全漏洞&#xff0c;漏洞的原理&#xff0c;可能导致的安全问题&#xff0c;以及如何防御与避免。本文分享的是跨站点请求伪造&#xff08;Cross Sites Request Forgery&#xff09;。 跨站点请求伪造&#xff0c;指利用用户身份操作用户账…
阅读更多...
【图像分类实用脚本】数据可视化以及高数量类别截断

【图像分类实用脚本】数据可视化以及高数量类别截断

图像分类时&#xff0c;如果某个类别或者某些类别的数量远大于其他类别的话&#xff0c;模型在计算的时候&#xff0c;更倾向于拟合数量更多的类别&#xff1b;因此&#xff0c;观察类别数量以及对数据量多的类别进行截断是很有必要的。 1.准备数据 数据的格式为图像分类数据集…
阅读更多...
飞牛os使用ddns-go配合华为云实现内网穿透

飞牛os使用ddns-go配合华为云实现内网穿透

DDNS-Go 是一个开源的动态域名解析工具&#xff0c;它支持多种操作系统&#xff0c;包括 Windows、Mac 和 Linux&#xff0c;并且支持 ARM 和 x86 架构。以下是使用 DDNS-Go 的基本步骤&#xff1a; 1. 下载和安装&#xff1a; 访问 DDNS-Go 的 GitHub 仓库&#xff08;&#x…
阅读更多...
易语言OCR证件照文字识别

易语言OCR证件照文字识别

一.引言 文字识别&#xff0c;也称为光学字符识别&#xff08;Optical Character Recognition, OCR&#xff09;&#xff0c;是一种将不同形式的文档&#xff08;如扫描的纸质文档、PDF文件或数字相机拍摄的图片&#xff09;中的文字转换成可编辑和可搜索的数据的技术。随着技…
阅读更多...
二八(vue2-04)、scoped、data函数、父子通信、props校验、非父子通信(EventBus、provideinject)、v-model进阶

二八(vue2-04)、scoped、data函数、父子通信、props校验、非父子通信(EventBus、provideinject)、v-model进阶

1. 组件的三大组成部分(结构/样式/逻辑) 1.1 scoped 样式冲突 App.vue <template><!-- template 只能有一个根元素 --><div id"app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div> </template><script…
阅读更多...
3D工具显微镜的测量范围

3D工具显微镜的测量范围

一、测量尺寸范围 样品尺寸&#xff1a; 3D工具显微镜通常能够测量各种尺寸和形状的样品&#xff0c;从小至微米级别的微小结构到大至几厘米甚至更大的物体。具体的测量尺寸范围取决于显微镜的载物台大小、镜头焦距以及软件处理能力。测量精度&#xff1a; 3D工具显微镜的测量…
阅读更多...
C#—扩展方法

C#—扩展方法

扩展方法 扩展方法是C#中一种特殊的静态方法&#xff0c;它定义在一个静态类中&#xff0c;但是可以像实例方法一样被调用&#xff0c;使得代码看起来更为直观和易于阅读。扩展方法允许你在不修改原始类的情况下&#xff0c;添加新的方法到现有的类型中。 有↓箭头的是扩展方…
阅读更多...
vertx idea快速使用

vertx idea快速使用

目录 1.官网下载项目 2.修改代码 2.1拷贝代码方式 为了能够快速使用&#xff0c;我另外创建一个新的maven项目&#xff0c;将下载项目的src文件和pom文件拷贝到新建的maven项目。 2.2删除.mvn方式 3.更新配置 4.配置application 5.idea启动项目 1.官网下载项目 从vert…
阅读更多...
最新文章

Copyright @ 2022~2023