开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

前言

vue3引入了组合式API，对比vue2也是新增了很多方法，在vue2中我们在data中声明变量赋值，这些变量都是响应式的，在组合式API中，我们则是通过ref()与reactive()两种方法声明变量赋值，今天我们就来看一下这两个方法的用法。

ref()

当我们声明变量时，通过ref()进行赋值，我们就能得到一个响应式的ref对象，注意返回的是个对象，我们打印一下ref对象：

<script setup lang='ts'>
import { ref } from 'vue';
const a = ref('a');
console.log(a);
</script>

QQ图片20230202221233.png

返回的对象包含了value，所以我们读取值的时候就要用'变量.value'，这是跟vue2不同的地方，其他几个key值都是vue内部定义的值：

__v_isRef:是否是ref对象。
__V_isShallow:是否是浅层次响应。
_rawVlaue:初始值。
_value:相对于代理value，进行内部更新逻辑。

vue3跟ts密不可分，所以对于ref中ts类型，我们也要了解下ref对应ts类型：

   function ref<T>(value: T): Ref<UnwrapRef<T>> interface Ref<T> { value: T }

UnwraoRef是什么呢？从Ref{value:T}我们猜出UnwraoRef跟value类型要一致，所以它的作用是对Ref类型进行反解，代表着ref.value类型。 ref主要用来对基本类型的数据进行赋值，对于对象、数组等我们通过reactive()进行赋值。

reactive()

reactive()接受的是对象，它返回的是对象的代理，reactive的响应式是深层次的，对象里面的值也可以是ref对象。如果是ref对象，它能够自动对ref对象进行处理，让ref对象value值与reacive里面对应的值保持响应式。

 import {ref, reactive } from 'vue';
const a = reactive({name:'tpsz'});
console.log(a);
console.log(a.name)
const b = ref(2)
const c = reactive({b})
console.log(c.b)//2
b.value = 3
console.log(c.b)//3

-从上面例子我们可以看出，当改变b.value值时，c中的b值也会相应改变，这就是reactive对ref对象的解包。 reactive中ts类型如下：

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

总结

ref()与reacitve()都是创建响应式数据的方法，ref()返回对象，常用于对基本类型数据的赋值，但是ref()是能够赋值对象的，reactivee()则只能接收对象进行赋值。

vue学习——ref()与reactive()

前言

ref()

reactive()

总结