vue3响应式API ref、isRef、unref、toRef、toRefs

vue3 Refs

在学习vue3的过程中，相比大家或多或少的了解中得知，在vue3中 相应式原理从原先vue2通过
Object.defineProperty 实现数据劫持，使得数据实现响应式更新。更换使用基于Proxy和Reflect，可以原生监听数组，可以监听对象属性的添加和删除。不需要一次性遍历data的属性，从而提高性能
*ps 由于 Proxy 是ES6的语法 只能兼容到IE11

ref

定义一个变量 通过 ref 是数据 响应式
在html 中使用变量的方法 基本和vue2 没什么差距
在Js 或者 Ts 中 若通过 ref 实现数据响应式 修改是 需通过 变量.value的方式修改
详情如下。

// 在vue3中使用ref 使数据 响应式
<div>
   <div>{{ `我是${Name}` }}</div>
   <button @click="updateName">修改</button>
</div>

<script setup>
	import { ref } from "vue"; // 引用 ref
	const Name = ref("xiaohuang"); // 定义变量 Name
	// 修改name
	const updateName = () => {
	  Name.value = "xiaoming";
	};
</script>

isRef

isRef() 检测变量是否是响应式数据

import { ref, isRef } from "vue";
const code = ref(0);
const falg = true;
console.log(isRef(code)); // true
console.log(isRef(falg));// false

unref

如果参数是一个 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 的语法糖函数。

import { ref, unref} from "vue";
const code = ref(0);
const falg = true;

console.log(unref(code));  // 0 // 是 ref 返回 code.value
console.log(unref(falg)); // true // 不是 ref 直接返回 falg本身 true

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

import { ref, toRef } from "vue";
// 使用 toRef 后 两个变量数据 会产生链式关系 互相响应 一个数据发送改变 另一个也会跟随 改变
const name = ref({
  firstName: "xiao",
  lastName: "huang",
});

const update = toRef(name.value, "lastName");

update.value = "peng";
console.log(name.value.lastName); // peng

name.value.lastName = "huang";
console.log(update.value); // huang

toRefs

将一个响应式对象 转换成普通对象 但是 对象中的数据 还是 响应式（ref）

import { ref, toRefs } from "vue";
const name = ref({
  firstName: "xiao",
  lastName: "huang",
});

const fooRef = toRefs(name.value);


fooRef.lastName.value = "peng";
console.log(name.value.lastName); // peng

name.value.lastName = "huang";
console.log(fooRef.lastName.value); // huang