ref, reactive

ref 支持所有类型, reactive 只支持引用类型 Array, Object, Map, Set

ref 取值, 赋值需要 .value, reactive 不需要 .value

reactive 不能直接赋值, 否则会破坏其响应式的功能（数组使用 push 加解构）（把数组作为一个属性）

readonly 把所有属性变成只读的。

ref 只能浅层解包。

toRef

toRef 只有在修改响应式对象的字段的值时视图才会变化, 修改非响应式对象的字段时视图毫无变化

<template>
  <div>
    {{ man }}
    <hr />
    {{ name }}
    <hr />
    <button @click="change">click</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRef } from "vue";

const man = reactive({ name: "wzy" });
const name = toRef(man, "name");

const change = () => {
  man.name = "w";
  name.value = "z";
  console.log(man);
  console.log(name);
};
</script>
<style scoped></style>

toRefs

toRefs 把响应式对象的所有字段都变成响应式对象到一个对象中。一般是会搭配解构赋值使用。

const { name, age } = toRefs(man);

上面的代码中, name, age 都是响应式了。在通过 name.value 修改时，man.name 的值也会被修改。视图也会更新。

toRaw

toRaw 可以获取到响应式对象的原始对象

<script setup lang="ts">
import { reactive, toRaw } from "vue";

const man = reactive({ name: "wzy" });

const change = () => {
  // name.value = "123";
  const raw = toRaw(man);
  console.log(man, raw); // 响应式对象, 原始对象
  man.name = "wwww"; //   视图， 响应式对象, 原始对象 都会更新
  console.log(man, raw); // 可以观察到响应式对象, 原始对象的 name 字段都会更新
};
</script>