vue3创建响应式数据ref 和 reactive 区别

ref函数创建(可以接收基本值和对象值)

• 创建基本类型时,返回一个ref对象,通过.value获取值,具备响应式
• 创建基本类型数据时,Ts定义接受一个基本类型的泛型类型定义
• 创建复杂数据时,返回一个ref对象,ref对象的value属性是通过调用reactive方式返回的代理对象,具备响应式,即使这个对象被替换,也具备响应式(内部数据也具备响应式)
• 创建复杂数据时,Ts定义接收一个复杂类型的泛型定义

<script lang="ts" setup>
import {ref} from 'vue';
//声明一个接口(数组数据,通过下标定义)
interface NumberArray {
  //前面是索引值，后面是返回的 number 类型的结果
  [index: number]: number;
}
const a = ref<string>('别问,爱过!');
//返回一个ref对象
console.log(a)
const obj = ref<NumberArray>([1,2,3]);
//返回一个代理对象
console.log(obj.value) //Proxy(Array){0: 1, 1: 2, 2: 3}
</script>

衍生问题

• 为什么ref对象已经是响应式的,而ref内部还要把接收到的对象类型进行调用reactive得到代理对象???
  • ref对象的响应式,只是说明这个ref对象中的value值被替换的时候,可以进行响应,但是如果报存的是一个对象,对象内部的改动,并没有影响.value中保存的地址,所以ref对象的响应式在这里无能为力
  • 所以ref对象中value如果保存的是对象类型,我们需要把这个对象类型通过reactive方法得到代理对象,来实现这个数据对象的响应式

reactive函数创建(接收对象值)

• 接收一个对象值,返回代理对象,具备响应式
• 如果接收的是一个包装对象,也可返回一个对象,但是不具备响应式
• reactive函数接收复杂类型的泛型定义(源码定义了必须是Object类型)
• reactive返回的代理对象只监听当前的对象的响应式变化,如果替换这个对象,就不具备响应式了

<script lang="ts" setup>
import {reactive} from 'vue'
interface ObjType {
  name:string,
  age:number,
  sex:string
}
let man = reactive<ObjType>({name:'老王',age:30,sex:'男'});
console.log('reactive返回的代理对象:',man)
let text = reactive(Object(0))
//一个普通的对象
console.log('reactive传包装对象返回的对象:',text);
</script>