vue3中的ref和reactive的区别
1、响应式数据
处理响应式数据时到底是该用ref还是reactive...
举例说明：
<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>
2、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以后，我们的a就变成了一个RefImpl的实例对象，我们可以看到a的值储存在里面的.value属性,于是通过.value我们就可以访问到值，来看看效果：
这样我们a的值就是一个响应式数据了
ref处理对象类型
同样的，有一名叫大C的员工，点击按钮就可以给他涨工资
<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了
3、reactive
reactive是不能用来处理基本数据类型的，reactive处理基本数据类型来看例子:
<template>
<div>a:{{a}}</div>
</template>
<script setup>
import {reactive} from 'vue'
const a = reactive(1)
</script>
这时我们虽然能够看到a显示，但是会报警告：
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是什么…
4、ref VS reactive
1、返回值类型：
ref返回一个包含响应式基本数据类型值的对象。reactive返回一个包含响应式对象的 Proxy 对象。
包装的数据类型：ref可以包装基本数据类型（如数字、字符串、布尔值等）和引用类型（如对象、数组等）。reactive只能包装引用类型数据（对象、数组等）。
访问数据：- 通过
ref创建的响应式对象，需要通过 .value 访问或修改其值。 - 通过
reactive创建的响应式对象，可以直接访问和修改其属性。
应用场景： ref适用于包装单个基本数据类型或对象。reactive适用于包装包含多个属性或复杂数据结构的对象。
其实不管是用ref还是 reactive，就像是在情人节选择礼物一样，有时候你需要一束精致的玫瑰（ref），有时候你更想要一份充满惊喜的礼物（reactive）。无论你选择哪个，都是为了让代码更加美好，让开发更加愉快！
5、往期回顾
总结：
前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。
— 关注我：前端路上不迷路 —
