vue3 响应式 API：ref() 和 reactive()

于 2024-08-18 19:48:01 发布
阅读量397 收藏 7
点赞数 6
分类专栏： vue3 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fishmemory7sec/article/details/141286851
版权

在 Vue 3 中，响应式系统是其核心特性之一，它使得数据的变化能够自动触发视图的更新。

官方文档：
响应式 API：核心
要更好地了解响应式 API，推荐阅读官方指南中的章节：
响应式基础 (with the API preference set to Composition API)
深入响应式系统

reactive()

基本概念

  • 作用：用于创建一个响应式的对象。如果对这个对象的属性进行修改，会自动触发视图的更新。
  • 可接收的数据类型：只能定义对象类型的响应式数据。使用reactive()定义基本类型会报错，要用ref。
  • 语法：let 响应式对象= reactive(源对象)
  • 返回值：一个Proxy的实例对象，简称：响应式对象。
  • 类型：
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

使用reactive()创建对象类型的响应式数据：

<template>
  <div>
    <p>姓名: {{ person.name }}</p>
    <p>年龄: {{ person.age }}</p>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

const person = reactive({
  name: '张三',
  age: 36
})
console.log(person)

// 报错：类型“number”的参数不能赋给类型“object”的参数。
let count = reactive(0)

</script>

控制台打印：
在这里插入图片描述

直接修改响应式对象的属性值，会触发依赖这些属性的组件重新渲染：

// 直接修改，立即响应
person.name = '李四'
person.age = 24

// 使用方法，调用方法后再响应
const changePerson = () => {
  person.name = '李四'
  person.age = 24
}

reactive()深层响应性

  • 对象的嵌套属性也具有响应式
    • 响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。
<template>
  <div>
    <p>b: {{ obj.a.b }}</p>
    <p>d: {{ obj.a.c.d }}</p>
    <button @click="changeB">修改b</button>
    <button @click="changeD">修改d</button>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

const obj = reactive({
  a: {
    b: 10,
    c: {
      d: 20
    }
  },
});
const changeB = () => {
  obj.a.b++
}
const changeD = () => {
  obj.a.c.d++
}
</script>

在这个例子中，修改嵌套对象的属性也会触发响应式更新。
不管数据嵌套的有多深，reactive()一定会把数据变成响应式的。

  • 数组的响应式
    • 对响应式数组进行添加、删除、修改等操作都会触发依赖这个数组的组件重新渲染。
<template>
  <div>
    <ul>
      <li v-for="item in personArr" :key="item.id">
        姓名：{{ item.name }} ， 年龄：{{ item.age }} 岁
      </li>
    </ul>
    <button @click="addPerson">添加</button>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';

const personArr = reactive([
  {id: 1, name: '张三', age: 17 },
  {id: 2, name: '李四', age: 18 },
  {id: 3, name: '王二', age: 16 },
]);

console.log(personArr); 
const addPerson = () => {
  personArr.push({ id: 4, name: '张麻子', age: 16 });
};

</script>

控制台打印：
在这里插入图片描述

  • 直接赋值整个响应式对象不会触发响应式更新
let person = reactive({
  name: '张三',
  age: 36,
});

// 这样不会触发响应式更新
const changePerson = () => {
  person = {
    name: 'john',
    age: 30
  }
}

// 使用Object.assign()等方法来更新属性
const changePerson = () => {
  Object.assign(person, {
    name: '李四',
    age: 24,
  });
}
  • 响应式对象的属性必须在创建时存在
const person = reactive({
  name: '王二',
});

// 报错：类型“{ name: string; }”上不存在属性“age”。
person.age = 30;

ref()

基本概念

ref()接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

  • 作用：定义响应式的变量。
  • 可接收的数据类型：基本类型、对象类型的响应式数据。若ref接收的是对象类型，内部其实也是调用了reactive函数。
  • 语法：let xxx = ref(初始值)。
  • 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。
  • 类型：
function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

ref 对象是可更改的，也就是说可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪。

使用 ref() 创建基本类型的响应式数据

<template>
  <div>
    <p>count: {{ count  }}</p>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

// 在组合式 API 中，推荐使用 ref() 函数来声明响应式状态
const count = ref(0)
consoe.log(count)    // count 是一个RefImpl的实例对象
console.log('count.value:', count.value) // count.value:0

count.value = 1
console.log('count.value:', count.value) // count.value:1
</script>

控制台打印：
在这里插入图片描述
注意：

  • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用{{xxx}}。
  • 对于const count = ref(0)来说，count不是响应式的，count.value是响应式的。

ref()深层响应性

当ref()包裹的是一个对象时，对这个对象的属性进行修改也会触发响应式更新。

<template>
  <div>
    <p>姓名: {{ person.name }}</p>
    <p>年龄: {{ person.age }}</p>
    <button @click="changePerson">修改信息</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const person = ref({
  name: '张三',
  age: 36
})
console.log(person)

const changePerson = () => {
  person.name = '李四'
  person.age = 24
}
</script>

使用ref()定义一个对象类型的响应式数据，页面是正常展示数据的：
在这里插入图片描述
数据详细信息解析：

  • RefImpl {... }：这表示这是一个由ref函数创建的响应式对象的内部实现结构展示。
  • __v_isShallow：表示是否是浅层响应式，这里为false，说明不是浅层响应式。
  • dep：这是一个依赖收集器，用于跟踪哪些部分的代码依赖于这个响应式对象。当响应式对象的值发生变化时，会通知依赖它的部分进行更新。这里显示为一个包含一个ReactiveEffect的Map，说明有一个依赖项。
  • __v_isRef：为true，表明这是一个由ref创建的响应式引用。
  • _rawValue：存储了原始的值，这里是一个包含name和age属性的对象。
  • _value和value：都是代理对象，通过代理可以实现对原始对象的响应式追踪。
  • [[Handler]]和[[Target]]：是与代理对象相关的内部属性，[[Handler]]是处理程序，用于定义对目标对象的各种操作的拦截行为，[[Target]]是被代理的原始对象。

从控制台打印的数据结构可以看出：如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

表面上它返回来的是一个RefImpl的实例对象，但是在这个实例对象的_value、value属性里，是 reactive() 的返回值：一个Proxy的实例对象。

直接调用changePerson修改信息，person没有被修改。编译器会报错：

const changePerson = () => {
  // 报错：类型“Ref<{ name: string; age: number; }>”上不存在属性“name”。
  person.name = '李四'
  // 报错：类型“Ref<{ name: string; age: number; }>”上不存在属性“age”。
  person.age = 24
  console.log(person)
}

ref定义的数据，如果要修改，要用.value来更改。

const changePerson = () => {
  console.log('修改前打印person.value:', person.value)
  person.value.name = '李四'
  person.value.age = 24
  console.log(person)
}

在这里插入图片描述

可以使用Vue - Official插件自动添加.value。

在这里插入图片描述

在这里插入图片描述

ref() 与 reactive()的区别

  1. 从数据类型看：
    • ref()用来定义：基本类型数据、对象类型数据；
    • reactive()用来定义：对象类型数据。
  2. 返回值类型：
    • ref()返回值： 一个RefImpl的实例对象。
    • reactive()返回值：一个Proxy的实例对象，简称：响应式对象。
  3. 响应式更新方式：
  • ref()通过修改.value属性来触发响应式更新。
    ref()跳过 .value属性直接修改变量的值，不会出发响应式更新。
import { ref } from 'vue';
let person = ref({name: '张三', age: 36});
const changePerson = () => {
  // 重新分配一个对象，触发响应式更新
  person.value = { name: '李四', age: 24 }
  // ref 跳过 .value，不会出发响应式更新
  person = { name: '李四', age: 24 }
}

let count = ref(0)
const changeCount = () => {
  // 可以触发响应式更新
  count.value ++;

  // 不会触发响应式更新
  count = ref(10)
}
  • reactive()直接修改对象的属性即可触发响应式更新。
import { reactive } from 'vue';
let person = reactive({name: '张三', age: 36});
const changePerson = () => {
  person.name = '李四'   // 触发响应式更新
  person.age = 30        // 触发响应式更新
}
  • reactive()重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
import { reactive } from 'vue';
let person = reactive({name: '张三', age: 36});

// 不会触发响应式更新
const changePerson = () => {
  // 重新分配一个对象
  person = { name: '李四', age: 24 }
  
  // person = reactive({name: '张三', age: 36});
  // 与person = reactive({ name: '李四',age: 24 });
  // 是完全不同的2个完全不同的person， 根本不是同一个东西
  person = reactive({ name: '李四', age: 24 });
}

// 使用Object.assign()等方法来更新属性
const changePerson = () => {
  Object.assign(person, {
    name: '李四',
    age: 24,
  });
}

  1. 深层响应性：

    • reactive()可以自动保持对象的深层响应性，即嵌套对象的属性修改也会触发响应式更新。
    • 对于ref()包裹的对象，直接修改嵌套对象的属性可能不会触发响应式更新，需要特殊处理。

  2. 使用场景：

    • 若需要一个基本类型的响应式数据，必须使用ref()。
    • 若需要一个响应式对象，层级不深，ref()、reactive()都可以。
    • 若需要一个响应式对象，且层级较深，推荐使用reactive()。
fishmemory7sec
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ref Effect baseHandler reactive Proxy Vue 3
01-04
在 Vue 3 中，引入了 `ref` 和 `reactive` 两个核心 API，它们构建在 `Proxy` 之上，为开发者提供了更直观的响应式声明方式。`ref` 主要用于创建可响应的值，它可以是一个基本类型或者一个对象。当你对 `ref` 创建的...
vue3响应式.zip
08-31
Vue3响应式是Vue.js框架在第三版中的一个重要特性，它极大地优化了数据绑定和视图更新的过程，提高了性能。这个压缩包文件“vue3响应式.zip”包含了一个使用Rollup构建工具和TypeScript编写的Vue3响应式原理的源码...
vue响应式API，ref和reactive的使用
I_am_shy的博客
05-30 1097
在setup函数中，返回的值是不能够被改变的，通过响应式API（ref和reactive）的响应式代理，可以实现传递动态变化的值。响应式API可以让setup中的非响应数据，传递出来，并使其可以响应，从而实现页面的动态编辑，我们可以把ref和reactive看成对数据的特殊赋值，
Vue 3 响应式对象：ref 和 reactive 的使用和区别
chen520的博客
10-29 1765
Vue 3 是 Vue.js 的最新版本，它带来了许多新的特性和改进，包括更好的性能、更简单的 API、更好的 TypeScript 支持等等。Vue 3 继续沿用了 Vue 2.x 的开发理念和模式，同时增加了一些新的概念和工具，使得开发者能够更高效地开发前端应用。在 Vue 3 中，有两种主要的方法来创建响应式对象：使用 ref 和使用 reactive。ref 是 Vue 3 中用于创建响应式引用的函数。它返回一个包装过的对象，这个对象的值是可以改变的，但它的引用是不会改变的。
【vue3|第5期】Vue3响应式数据：ref 与 reactive 的深入解析
Commas的博客
05-31 1330
在Vue3中，响应式数据是构建动态UI的基石。Vue3引入了组合式API（即 Composition API），并提供了ref和reactive两个函数来创建响应式数据。本文将详细介绍ref和reactive的使用方法、适用场景、区别以及它们之间的联系。ref和reactive是Vue3中创建响应式数据的两个重要函数。它们各有特点，适用于不同的场景。通过深入理解它们的用法和区别，可以更加灵活地构建Vue3应用程序的响应式数据层。
vue3响应式对象：ref和reactive
qq_34498806的博客
10-26 660
ref和reactive全家桶
vue3响应式：Ref和Reactive区别及使用方法
学习，是熵减的最有效途径。
08-07 484
在Vue3中，Ref和Reactive是两个实现响应式编程的关键的API。
Vue3实战笔记（49）—Vue 3响应式魔法：ref vs reactive深入对决
山花的博客
05-28 1169
Vue 3 中的 ref 和 reactive 都是用于创建响应式数据的工具，但它们之间存在一些重要的区别。总的来说，ref 和 reactive 都是Vue 3中强大的响应式API，选择使用哪一个取决于具体的使用场景和性能考虑。对于基本数据类型或需要替换对象的场景，ref 是合适的选择；而对于需要创建一个响应式状态容器的对象，reactive 是更好的选择。轻挥一袖桃花雨，醉卧云水笑春阳。
一篇文章搞懂Vue3响应式：Ref和Reactive
AQiukai的博客
08-14 893
关于vue3中ref和reactive相关知识点整理
Vue.js 3.x 中的响应式数据：ref 与 reactive
weixin_50407990的博客
12-28 603
Vue.js 3.x 引入了 Composition API，其中的ref和reactive是用于创建响应式数据的两个重要函数。在本篇博客中，我们将深入探讨它们的区别以及在实际应用中的使用场景。
[vue3]响应式：ref与reactive
weixin_75003151的博客
08-11 156
reactive 让整个对象或数组变为响应式，这意味着当对象的任何属性发生变化时，Vue 会自动追踪这些变化并更新相关的视图。ref用于创建一个响应式的数据对象，可以持有任何类型的值，并且当这个值发生变化时，Vue 会自动追踪并更新视图。ref函数返回的是“.value”属性对象，所以当ref创建响应式变量时，要通过它来更新与访问。在 Vue 3 中，ref与reactive 都是非常重要的函数，用于创建响应式的数据对象。//脚本区域修改ref产生的响应式对象数据，必须通过.value属性。
总结vue3响应式原理与ref、reactive
gaotlantis的博客
06-06 820
ref判断了对象是原始类型还是object，是object则通过reactive new Proxy后再赋值给value，否则直接赋值给value,ref支持声明number，布尔等原始类型的值和对象的响应式数据reactive只支持声明object响应式数据，返回的是一个Proxy代理对象通过Weak容器，实现观察者角色，ref和reactive都实现了通过get的track收集依赖到容器和set参数的trigger触发容易中的依赖的更新，下面是vue官方的一段话。
Vue3.0数据响应式原理详解
10-16
在Vue3中，响应式系统的实现主要依赖于ES6的`Proxy`和`Reflect`对象，这两个新特性使得Vue能够更加精细地监控数据的变化。 1. **ES6 Proxy**: `Proxy`允许我们创建一个代理对象，该对象可以拦截和控制对原始对象的...
Vue3.0 响应式系统源码逐行分析讲解
10-16
首先，要了解Vue3的响应式系统，就必须熟悉其提供的几个关键API：effect, reactive, computed, readonly 和 ref。这些API是Vue3响应式系统的基本组成部分，它们在实现上各有分工，但又彼此紧密协作。 effect API是...
vue3项目框架，包含响应式布局
04-29
3. **Ref和Reactivity**：Vue3的响应式系统进行了重构，使用了新的ref和reactive API，它们提供了更底层的访问和控制能力。Ref可以用来创建响应式引用，而reactive函数则可以将整个对象转换为响应式的。 4. **模板...
实现父组件调用子组件方法时报错：[Vue warn]: Invalid vnode type when creating vnode: null.
最新发布
08-14 282
[Vue warn]: Invalid vnode type when creating vnode: null.
Vue项目-Table添加Form表单校验
StupidlyGrass的博客
08-12 350
【代码】Vue项目-Table添加Form表单校验。
vue选中下拉框数据，但是值没有填充到框内
m0_68154641的博客
08-14 207
element-ui选中下拉框数据，但是值没有填充到框内
el-checkbox 状态不更新
bao
08-13 292
（不添加响应式大概是因为：原数据是从 vue 的data中过滤出来的，filter方法并不会生成一个新的数组。，并不会对这段数据添加响应式处理，所以修改数据时，修改的还是原数据。， 还是要学会自己找到问题原因，通过优化代码逻辑来解决问题。数据来源 / 浅拷贝 都会导致这个问题。否则数组中对象还是指向原数据。从现有数据中过滤出新的数据，并且添加。由于数据结构是 数组对象 格式，这里。以上代码中处理数据后 直接赋值到。解决 ，但频繁使用会影响性能。虽然很多此类情况都能使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值