响应式：工具

示例

响应式：工具

<template>
  <div>响应式：工具</div>
</template>

<script setup>
import {
  ref,
  reactive,
  isRef,
  unref,
  toRef,
  toValue,
  toRefs,
  isProxy,
  isReactive,
  isReadonly,
  readonly,
} from "vue";

// ref
const count = ref(1);
console.log(count.value); // 1
console.log(isRef(count)); // 检查某个值是否为 ref。
console.log(unref(count)); //  如果参数是 ref，则返回内部值，否则返回参数本身。  val = isRef(val) ? val.value : val

let aa = toRef(count, "value");
console.log(aa); // 将一个对象的属性转换为 ref。  toRef(obj, key) 返回一个 ref，指向 obj[key] 的值。

console.log("toValue", toValue(aa)); // 将 ref 或 reactive 对象转换为其原始值。  toValue(val) 返回 val.value 如果 val 是 ref，否则返回 val 本身。

const state = reactive({
  foo: 1,
  bar: 2,
});
// 将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref
const stateAsRefs = toRefs(state);
console.log("stateAsRefs", stateAsRefs.foo.value); // 将 reactive 对象的所有属性转换为 ref。  toRefs(obj) 返回一个对象，其中每个属性都是一个 ref，指向 obj 的相应属性。

let aaaa = "aaa";
let bbbb = readonly({ aaaa: "bbbb" });
console.log(isProxy(aaaa)); // 检查某个值是否为代理对象（reactive 或 readonly）。  isProxy(val) 返回 true 如果 val 是 reactive 或 readonly 的结果。
console.log(isReactive(aaaa)); // 检查某个值是否为响应式对象。  isReactive(val) 返回 true 如果 val 是 reactive 的结果。
console.log(isReadonly(bbbb)); // 检查某个值是否为只读对象。  isReadonly(val) 返回 true 如果 val 是 readonly 的结果。
</script>