到底该用ref还是reactive???

浅聊一下

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

响应式数据

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

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

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

<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的值,来看效果

到底该用ref还是reactive???

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

ref

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

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

ref处理基本数据类型

我们还是使用刚才的例子

<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还是reactive???
在使用ref以后,我们的a就变成了一个RefImpl的实例对象,我们可以看到a的值储存在里面的.value属性,于是通过.value我们就可以访问到值,来看看效果

到底该用ref还是reactive???

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

ref处理对象类型

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

<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>

先来看效果

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

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

reactive

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

reactive处理基本数据类型

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

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

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

到底该用ref还是reactive???

reactive处理对象数据类型

<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是什么…

到底该用ref还是reactive???
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)。无论你选择哪个,都是为了让代码更加美好,让开发更加愉快!

原文链接:https://juejin.cn/post/7334225435944173609 作者:滚去睡觉

(0)
上一篇 2024年2月15日 上午10:51
下一篇 2024年2月15日 上午11:02

相关推荐

发表评论

登录后才能评论