快速打通 Vue 3（二）：响应式对象基础

news/2024/6/17 11:36:24 标签: vue.js, javascript, ecmascript

很激动进入了 Vue 3 的学习，作为一个已经上线了三年多的框架，很多项目都开始使用 Vue 3 来编写了
这一组文章主要聚焦于 Vue 3 的新技术和新特性
如果想要学习基础的 Vue 语法可以看我专栏中的其他博客
Vue（一）：Vue 入门与 Vue 指令
Vue（二）：计算属性与 watch 监听器
Vue（三）：Vue 生命周期与工程化开发
一篇文章快速通关 Vuex（适合小白学习）
Vue 框架前导：详解 Ajax
快速打通 Vue 3（一）：基本介绍与组合式 API
上一篇 Vue3 博客：快速打通 Vue 3（一）：基本介绍与组合式 API
后续还会继续更新，期待大家的关注！

04. 响应式数据 —— ref 与 reactive

关于响应式数据的官方介绍

4.1 ref 创建响应式数据

要点概览：

  1. 要使用需要加入 .value
  2. 模板会自动添加

通过上面的尝试我们知道，在 setup 中声明的数据默认 不是响应式的，我们需要手动将其声明为响应式，这里就需要 ref 函数。

语法 let xxx = ref(初始值)，返回值是一个 RefImpl 的实例 对象

对象中的 value 属性 是响应式的，相当于 ref 为我们的数据上了一层包装，数据放在其中的 value 属性上，我们操控数据要通过操控其 value 属性来实现

这意味着我们只写 sum += 1 是无法实现我们想要的效果的

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

模板会自动为我们添加 value 属性，模板中直接写 {{数据名}} 即可

<template>
  <div class="person">
    <h2>当前数字的为 {{ sum }}</h2>
    <button @click="addOne">+1</button>
  </div>
</template>

<script setup lang="ts">javascript">
import { ref } from 'vue';
  let sum = ref(0);
  function addOne() {
    console.log(sum);
    sum.value += 1;
  }
</script>

我们来打印一下整个对象

4.2 reactive 创建对象类型的响应式数据

要点概览

  1. reactive 函数只能创建响应式对象数据
  2. 创建的响应式数据是深层次1的
  3. 修改对象为新对象会破坏其响应式特性

响应式数据除了基本的数据类型还包括对象类型，上面的 ref 函数也可以创建对象类型的响应式数据

但是要借助 reactive 函数实现，所以我们这里先来说一下 reactive 函数

reactive 函数 只能 创建对象类型的响应式数据

语法：let xxx = reactive(源对象)

返回值是一个 Proxy 的实例对象，简称响应式对象

<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changeName">changeName</button>
  </div>
</template>

<script setup lang="ts">javascript">
import { reactive } from 'vue';
  let person = reactive({
    name: 'Tom',
    age: '18'
  })
  function changeName () {
    person.name = 'Jack';
  }
</script>


且 reactive 声明的对象是 深层次 的

<template>
  <div class="person">
    <h2>数字：{{a.b.c}}</h2>
    <button @click="change">change</button>
  </div>
</template>

<script setup lang="ts">javascript">
import { reactive } from 'vue';
  let a = reactive({
    b: {
      c: 111
    }
  })
  function change () {
    a.b.c = 1;
  }
</script>

上面声明了一个嵌套对象，我们来尝试修改嵌套对象中的数据。


需要注意的是，我们不能修改对象，reactive 是将原本地址上的对象变为响应式对象。

但如果我们创建一个新的对象并且赋值给它，就不是响应式的了（用的不多但需要了解）。

官方文档：

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

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

javascript">  function changePerson() { 
    person = {name: 'Jack', age: 10};
  }

比如我们尝试修改，界面是没有任何变化的

4.3 ref 声明对象类型的响应式数据

要点概览：

  1. ref 的响应式对象是借助 reactive 函数创建的
  2. 使用响应式对象仍然需要 .value

上面我们提到 ref 函数也可以创建对象类型的响应式数据，让我们来尝试一下：

<template>
  <div class="person">
    <h2>姓名{{person.name}}</h2>
    <h2>年龄{{person.age}}</h2>
    <button @click="changeAge">changeAge</button>
  </div>
</template>

<script setup lang="ts">javascript">
import { ref } from 'vue';
  let person = ref({
    name: 'Tom',
    age: 18
  })
  function changeAge() {
    console.log(person);  
    person.value.age++;
  }
</script>

还是经典的修改年龄的界面，我们打印出来创建的这个 person 对象

非常熟悉的内容，正是我们上面 reactive 函数创建的响应式对象

我们使用 ref 创建的对象仍然需要加上 .value

4.4 ref 与 reactive

要点概述：

  1. 推荐使用 ref 作为主要 API
  2. reactive 在某些特定情况可以使用

根据官方文档，reactive 有如下的缺点：

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

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

    js

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

所以一般推荐使用 ref 作为主要的 API

但是当我们的对象深度很深的时候，例如表单对象，我们可能要写无数个 value 比较影响代码的美观，这时候在不影响的情况下是可以使用 reactive 的。

补充：关于解构

在Vue中，解构操作通常用于从对象或数组中提取数据，并将其赋值给变量，以便在Vue组件中使用。Vue支持解构赋值语法，让开发者可以更方便地操作组件中的数据。

  1. 对象解构

在Vue组件中，可以使用对象解构从组件的数据对象中提取数据。例如：

javascript">javascriptCopy codeexport default {
  data() {
    return {
      person: {
        name: 'Alice',
        age: 30,
        city: 'New York'
      }
    };
  },
  mounted() {
    const { name, age, city } = this.person;
    console.log(name); // 输出：Alice
    console.log(age); // 输出：30
    console.log(city); // 输出：New York
  }
};
  1. 数组解构

数组解构可以用于解构数组中的数据。例如：

javascript">javascriptCopy codeexport default {
  data() {
    return {
      numbers: [1, 2, 3, 4, 5]
    };
  },
  mounted() {
    const [first, second, third] = this.numbers;
    console.log(first); // 输出：1
    console.log(second); // 输出：2
    console.log(third); // 输出：3
  }
};
  1. 在模板中使用解构

还可以在Vue的模板中使用对象解构，例如：

javascript">htmlCopy code<template>
  <div>
    <p>{{ person.name }}</p>
    <p>{{ person.age }}</p>
    <p>{{ person.city }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: 'Alice',
        age: 30,
        city: 'New York'
      }
    };
  }
};
</script>

在模板中，可以直接通过{{ 变量名 }}的方式使用解构后的数据。

4.5 toRefs 与 toRef

要点概览：

  1. 响应式对象的属性转换为 ref 对象
  2. toRefs 批量转化呢，toRef 实现单个转换
  3. 需要加 .value 操控

我们来尝试将对象解构，将其中的属性交给模板 <template> 去显示

<template>
  <div class="person">
    <h2>姓名{{name}}</h2>
    <h2>年龄{{age}}</h2>
    <button @click="changeAge">changeAge</button>
  </div>
</template>

<script setup lang="ts">javascript">
import { reactive } from 'vue';
  let person = reactive({
    name: 'Tom',
    age: 18
  })
  let {name, age} = person;
  function changeAge() {
    console.log(person);  
    age.value++;
  }
</script>

那这个属性是响应式的吗？

很明显不是，无法将改变的属性显示在网页上，那应该怎么将结构出来的属性变为响应式的呢？

就需要这里讲的 toRefs

语法 let {name, age} = toRefs(person);

这样数据就变为响应式的了

toRef 与 toRefs 作用相同，但可以指定需要将哪个属性变为响应式的

语法：let name = toRef(person, 'name')

这样就可以将响应式对象中的属性也设置为响应式的

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

转换出来的是 ref 对象，很明显操控需要加 .value

补充——插件自动填充 .value

我们有时候会忘记添加 .value 或者会加错，这是和可以借助插件来自动为我们添加 .value

这里用到的插件是我们之前提到的 Vue Language Features (Volar)

打开设置界面 -> 拓展 -> Volar -> 打开 Auto Insert: Dot Value

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 深层次即对象内嵌套的对象也会被声明为响应式的对象。 ↩︎


http://www.niftyadmin.cn/n/5303573.html

相关文章

devops使用+vscode使用

devops使用+vscode使用

官方文档 使用 Git 进行代码 - Azure DevOps | Microsoft Learn 用ssh远程连接服务器debug 在插件中搜索SSH &#xff0c;具体步骤可以参考以下步骤 https://cloud.tencent.com/developer/article/1840922
阅读更多...
Qt之explicit作用及用法

Qt之explicit作用及用法

在 Qt 中&#xff0c;explicit 是一个关键字&#xff0c;用于修饰类构造函数。explicit 的主要作用是防止隐式类型转换&#xff0c;即禁止编译器使用该构造函数进行隐式类型转换。 在 C 中&#xff0c;当一个构造函数只接受一个参数的时候&#xff0c;它可能会被用于执行隐式类…
阅读更多...
C# 全屏label控件实现的贪吃蛇。

C# 全屏label控件实现的贪吃蛇。

C# 全屏label控件实现的贪吃蛇。 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using stat…
阅读更多...
几种Go语言开发的IDE

几种Go语言开发的IDE

Go语言&#xff08;或Golang&#xff09;是一种高效的编程语言&#xff0c;它支持并发机制和强大的标准库。由于其日益增长的流行&#xff0c;现在有许多IDE&#xff08;集成开发环境&#xff09;支持Go语言开发。这些IDE提供了代码高亮、智能代码补全、调试工具、版本控制集成…
阅读更多...
Vue全局变量的内存指向分析

Vue全局变量的内存指向分析

在开发中遇到了这样的一个工作场景，在请求接口拿到数据之后，我需要对拿到的数据进行升序降序的排序算法的计算，但是我在点击排序之后，表头莫名其妙消失了，找到原因是发现全局变量this.tableDataHeader 值发生了改变。 this.tableDataHeader = [res.data[0]]this.indexLeng…
阅读更多...
知识图谱与云计算

知识图谱与云计算

内容来自B站视频 复旦 肖仰华 老师的讲座&#xff0c;记在这里&#xff0c;不然一会就忘了。 https://www.bilibili.com/video/BV1HG4y1h7zK/?p5&spm_id_frompageDriver 智能的发展是由感知到认知&#xff0c;当下需要发展机器的认知能力。 实现认知智能需要人工智能的很…
阅读更多...
maven项目构建过程

maven项目构建过程

目录 一、maven项目构建过程 二、pom常用构建配置 三、pom默认构建配置 四、开发自定义构建插件 一、maven项目构建过程 生命周期阶段插件目标执行的任务cleanpre-clean　清理前的准备工作cleanmaven-clean-plugin:clean清空target目录post-clean　清理结束后需要完成的工…
阅读更多...
Web自动化测试框架总结

Web自动化测试框架总结

实施过了web系统的UI自动化&#xff0c;回顾梳理下&#xff0c;想到什么写什么&#xff0c;随时补充。 首先&#xff0c;自动化测试不是手动测试的替代品&#xff0c;是比较好的补充&#xff0c;而且不是占大比重的补充。 70%的测试工作集中在底层接口测试和单元测试&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023