vue3中的ref和reactive的区别

- 1、响应式数据
- 2、ref
- 3、reactive
- 4、ref VS reactive
- 5、往期回顾
- - 总结：

在这里插入图片描述

1、响应式数据

处理响应式数据时到底是该用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的值，来看效果

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

2、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以后，我们的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 += 1000console.log(person.value);
}
</script>
<style lang="css" scoped>
</style>

看的出来，这也是一个响应式的数据，我们在处理基本数据类型修改的时候，我们都是用.value来获取数据的，那么这里在修改salary的值的时候不应该是 person.value.salary.value吗？我们来看person.value的打印结果…

我们可以看到，person.value是一个Proxy的实例对象，对象上有了我们的age等属性，所以不需要再接上.value了

3、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显示，但是会报警告：

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 += 1000console.log(person);}</script><style lang="css" scoped></style>