Vue3中ref和reactive的区别

前言

Vue3中实现数据响应式，用到的是组合式API中的ref和reactive函数，不同的是ref函数一般定义基本类型数据，而reactive函数用于定义一个对象类型的响应式数据。

---

1、两者的区别

1. ref和reactive区别:
   如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value
   如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value

2. Vue是如何决定是否需要自动添加.value的
   Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,
   如果是就自动添加.value, 如果不是就不自动添加.value

3. Vue是如何判断当前的数据是否是ref类型的
   通过当前数据的__v_ref来判断的
   如果有这个私有的属性, 并且取值为true, 那么就代表是一个ref类型的数据

2、ref

ref即可以定义基本类型、也可以定义对象类型。
template中取值时，会自动添加.value

<template>
<div @click="changeData ">{{msg}}</div>
</template>
<script setup>
import { ref,reactive } from "vue";
let msg = ref('hello world')
let obj = ref({
    name:'juejin',
    age:3
})
const changeData = () => {
  msg.value = 'hello juejin'
  obj.value.name = 'hello world'
}
</script>

3、reactive

reactive只能定义对象类型。定义基本数据类型不起作用
取值时不需要加.value

<template>
<div @click="changeData ">{{obj.name}}</div>
</template>
<script setup>
import { reactive } from "vue";
let obj = reactive({
    name:'juejin',
    age:3
})
const changeData = () => {
  obj.name = 'hello world'
}
</script>

4、使用ref定义基本类型数据，reactive定义对象类型数据原因

ref定义对象，在js中使用时都应该.value，如果定义的对象嵌套太深，再多一层.value太冗余，而reactive则无需.value；
ref定义对象类型数据，里边使用的也是reactive中的Proxy代理，不如直接使用reactive；
reactive不能直接定义基本类型数据，不起作用，可以将基本类型数据整体放入一个对象中，将reactive当作Vue2中的data去使用。