生成响应性代理

reactive

在 setup() 中可以创建一个静态对象
如果创建一个可以返回对象响应式副本，使用 reactive

import { reactive } from 'vue';
const obj = reactive({
    name: 'Mr.Lee',
  age : 100
});

readonly

readonly() 可以将静态对象或 reactive 响应式对象转换成 Proxy 代理对象；且只读，无法修改

响应性判断

isReactive

可以使用 isReactive() 判断是否为 reactive 响应式的 Proxy 对象

reactive 不支持原始值数据: Number、String、Boolean
底层是用 Proxy 实现，Proxy 支持引用值：对象与数组

const arr = reactive([1, 2, 3]);

isReadonly

可以判断是否只读代理

isProxy

还有一个 isProxy()，判断是否为代理对象（由 reactive 或 readonly 创建）

import { reactive, isReactive, readonly, isReadonly, isProxy } from 'vue';
const obj = reactive({
    name: 'Mr.Lee',
  age : 100
});
console.log("obj", obj);
console.log("isReactive", isReactive(obj)); // true
const copy = readonly(obj);
copy.age = 1; // 无法修改，会静默失败
console.log("copy.age", copy.age); // 100
console.log(isReadonly(obj), isReadonly(copy)); // false true
console.log(isProxy(obj), isProxy(copy)); // true true

浅方法

使用 reactive 与 readonly 是会跟踪自身的 property 的响应性 / 只读，包含其嵌套的对象深层也做了响应式 / 深读的转换。

shallowReactive / shallowReadonly

这两个浅方法，就是类似 reactive 与 readonly 的行为，但不对深层嵌套对象生效（显露原始值）

isReadonly 对于 shallowReadonly 来判断为 false，即是完全 readonly 时 isReadonly 才返回 true

点击查看【codepen】

原始对象化

toRaw

返回 reactive 或 readonly 代理的原始对象。

const foo = {}
const reactiveFoo = reactive(foo)
console.log(toRaw(reactiveFoo) === foo) // true

可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改。

markRaw

标记一个对象，使其永远不会转为 proxy。返回对象本身。生效只对对象浅层有效
作用在

• 有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。
• 当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。