到底该用ref还是reactive???

浅聊一下

今天情人节,掘友们都在想今天该和哪个女or男朋友出去玩,而我还在想在处理响应式数据时到底是该用ref还是reactive...

响应式数据

要写ref和reactive,就不能只写ref和reactive,还要写那响应式数据。何为响应式数据?先来讲段大道理

响应式数据是指在 Vue.js 中,当数据发生变化时,相关的视图会自动更新以反映这些变化的特性。Vue.js 的响应式系统通过数据绑定实现了数据和视图之间的自动同步。 具体来说,当你在 Vue 实例中声明一个数据属性时,Vue 将会将这些属性转换成响应式数据。这意味着当这些属性的值发生变化时,相关的视图会自动更新以反映这些变化。

看不下去...不用看,举个例子就好

html 复制代码
<template>
  <div>数据a:{{ a }}</div>
  <button @click="add">+1</button>
</template>
<script setup>
let a = 1;
const add = () => {
  a++;
  console.log(a);
};
</script>
<style lang="css" scoped></style>

有一个数据a,点击按钮"+1",数据a会增加1,并且会打印当前a的值,来看效果

我点了n下+1,可是显示的a的值并没有改变,但是我们可以从打印的结果发现,我们的a实际上是改变了的。如果要让我们的a变成一个响应式数据,也就是说a改变,展示在屏幕上的a也要变化,那么我们就要使用到 ref和reactive

ref

在 Vue 3 中,ref 是一个用于创建响应式引用的函数。它接受一个初始值作为参数,并返回一个包含响应式引用的对象。使用 ref 创建的值可以在模板中直接使用,并且当其值发生变化时,相关的 DOM 元素会自动更新。ref 通常用于创建可变的响应式值,例如基本类型数据,对象或数组。

我们来看ref如何发挥作用的

ref处理基本数据类型

我们还是使用刚才的例子

html 复制代码
<template>
  <div>数据a:{{ a }}</div>
  <button @click="add">+1</button>
</template>
<script setup>
import { ref } from "vue";
let a = ref(1)
const add = () => {
 a.value++;
  console.log(a);
};
</script>
<style lang="css" scoped></style>
  • 首先引入ref
  • 在ref的括号中填入a的值
  • 在修改a的值时,我们需要用.value来修改

来看看我们打印出来的a是什么

在使用ref以后,我们的a就变成了一个RefImpl的实例对象,我们可以看到a的值储存在里面的.value属性,于是通过.value我们就可以访问到值,来看看效果

这样我们a的值就是一个响应式数据了

ref处理对象类型

同样的,有一名叫张三的员工,点击按钮就可以给他涨工资

html 复制代码
<template>
   员工信息
   <div>姓名:{{person.name}}</div>
   <div>年龄:{{person.age}}</div>
   <div>工资:{{person.salary}}</div>
   <button @click="addSalary">涨工资</button>
</template>

<script setup>
import {ref} from 'vue'
let person = ref({
    name:'张三',
    age:18,
    salary:10000
})
const addSalary = ()=>{
    person.value.salary += 1000
    console.log(person.value);
}
</script>
<style lang="css" scoped>
</style>

先来看效果

看的出来,这也是一个响应式的数据,但是仔细的掘友就会发现,我们在处理基本数据类型修改的时候,我们都是用.value来获取数据的,那么我这里在修改salary的值的时候不应该是 person.value.salary.value吗?我们来看person.value的打印结果...

我们可以看到,person.value是一个Proxy的实例对象,对象上有了我们的age等属性,所以不需要再接上.value了。至于Proxy是一个什么东西,在接下来的几篇文章中,我将和大家来聊聊...

reactive

在 Vue 3 中,reactive 是一个函数,用于将普通 JavaScript 对象转换为响应式对象。响应式对象的属性在被访问和修改时会自动触发视图的更新,reactive 可以用于创建包含复杂数据结构的响应式对象,如嵌套对象和数组。

reactive处理基本数据类型

reactive是不能用来处理基本数据类型的,来看例子

html 复制代码
<template>
    <div>a:{{a}}</div>
 </template>
  <script setup>
 import {reactive} from 'vue'
 const a = reactive(1)
 </script>

这时我们虽然能够看到a显示,但是会报警告

reactive处理对象数据类型

html 复制代码
<template>
    员工信息
    <div>姓名:{{person.name}}</div>
    <div>年龄:{{person.age}}</div>
    <div>工资:{{person.salary}}</div>
    <button @click="addSalary">涨工资</button>
 </template>
 <script setup>
 import {reactive} from 'vue'
 let person = reactive({
     name:'张三',
     age:18,
     salary:10000
 })
 const addSalary = ()=>{
     person.salary += 1000
     console.log(person);
 }
 </script>
 <style lang="css" scoped>
 </style>

先来看看person是什么...

person是Proxy的一个实例对象,到这里你就应该明白怎么访问他的值了...

并且,在上面ref处理对象类型的时候,.value也是一个Proxy的实例对象,到这里,突然意识到原来ref处理对象数据类型的时候会偷偷求助reactive...

ref VS reactive

  1. 返回值类型

    • ref 返回一个包含响应式基本数据类型值的对象。
    • reactive 返回一个包含响应式对象的 Proxy 对象。
  2. 包装的数据类型

    • ref 可以包装基本数据类型(如数字、字符串、布尔值等)和引用类型(如对象、数组等)。
    • reactive 只能包装引用类型数据(对象、数组等)。
  3. 访问数据

    • 通过 ref 创建的响应式对象,需要通过 .value 访问或修改其值。
    • 通过 reactive 创建的响应式对象,可以直接访问和修改其属性。
  4. 应用场景

    • ref 适用于包装单个基本数据类型或对象。
    • reactive 适用于包装包含多个属性或复杂数据结构的对象。

其实不管是用ref还是reactive,只要在特定的场景下分情况使用他们就好了,跑步要穿运动鞋,在寝室里就给我把拖鞋穿上...

结尾

ref 还是 reactive,就像是在情人节选择礼物一样,有时候你需要一束精致的玫瑰(ref),有时候你更想要一份充满惊喜的礼物(reactive)。无论你选择哪个,都是为了让代码更加美好,让开发更加愉快!

相关推荐
用户380225859824几秒前
vue3源码解析:响应式机制
前端·vue.js
UrbanJazzerati1 分钟前
使用 Thunder Client 调用 Salesforce API 的完整指南
面试·visual studio code
bo521002 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag4 分钟前
报错 400 和405解决方案
vue.js·spring boot
普通程序员8 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
白杨木影子被拉长9 分钟前
多状态映射不同样式(scss语法)
vue.js·uni-app
山有木兮木有枝_11 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子12 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a15 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心15 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试