vue组合式API（三）

1，isProxy

作用：判断一个变量是不是 readonly 或 reactive的。

// Demo.vue

<template>
  <h1>isProxy的使用</h1>
  <h1 v-text="user2.a"></h1>
  <button @click="add">+1</button>
</template>

<script setup>
import { reactive, readonly, ref, isReactive,isProxy } from "vue";

const uu = { a: 1, b: 2 };
const user = reactive(uu);

const info = readonly({ c: 3, d: 4 }); // 是Readonly
const user2 = readonly(user); // 是Readonly
const foo = ref(100);  // foo是一个ref，不是reactive
const foo2 = readonly(foo); // 是Readonly

const xx = 100;

const add = () => {
  user2.a++;
};

// isProxy判断一个变量是否是readonly或reactive
console.log(isProxy(uu));
console.log(isProxy(user));
console.log(isProxy(info));
console.log(isProxy(user2));
console.log(isProxy(foo));
console.log(isProxy(foo2));
console.log(isProxy(xx));

</script>
<style lang="less" scoped>
</style>

#2，toRaw

作用：得到返回 reactive变量或 readonly变量的"原始对象"。
语法:：const raw = toRaw(reactive变量或readonly变量)
说明：reactive(obj)、readonly(obj) 和 obj 之间是一种代理关系，并且它们之间是一种浅拷贝的关系。obj 变化，会导致reactive(obj) 同步变化，反之一样。

// Demo.vue

<template>
  <h1>toRaw的使用</h1>
</template>

<script setup>
import { reactive, toRaw, readonly } from "vue";

const uu = { a: 1, b: 2 };  // 原始对象
const user = reactive(uu);  // 把uu变成了reactive

const info = readonly(user);  // 把reactive变成readonly

// toRaw(user) 把一个reactive打回原形  变成原始对象
// 它们之间的转化是浅copy
// toRaw(user)  和  uu 始终是同一个对象
console.log(toRaw(user) === uu);  // true
// reactive对象和原始对象比较：false
console.log(user === uu);

console.log("-----------");

// toRaw(info) 把一个readmonly打回原形 还是得原始对象
console.log(toRaw(info) === uu);
</script>

#3，markRaw

作用：把一个普通对象标记成"永久原始"，从此将无法再变成proxy了。
语法：const raw = markRaw({a, b})

// Demo.vue

<template>
  <h1>markRaw的使用</h1>
  <h2>{{ yy2.a }}</h2>
  <button @click="add">+1</button>
</template>

<script setup>
import { reactive, markRaw, isReactive } from "vue";

// { a: 1, b: 2 } 就是原始对象
// markRaw({ a: 1, b: 2 }) 把原始对象标记为不可代理
// 不能是raactive或readonly
const user = markRaw({ a: 1, b: 2 });

// yy2不是reactive  因为user被标记为永久原始
const yy2 = reactive(user);
console.log(isReactive(yy2));

// 不是一个reactive，不是响应式的
const add = () => {
  yy2.a++;
};
</script>

#4，shallowReactive

作用：定义一个reactive变量，只对它的第一层进行Proxy, 所以只有第一层变化时视图才更新。
语法：const obj = shallowReactive({a:{b:9}})

// Demo.vue

<template>
  <h1>shallowReactive的使用</h1>
  <h2>{{ aa }}</h2>
  <button @click="change">change</button>
</template>

<script setup>
import { shallowReactive } from "vue";

// { a: { b: { c: 1 } } }   利用shallowReactive，只能对第1层代理
// 所谓的第1层就是a这个属性
let aa = shallowReactive({ a: { b: { c: 1 } } });
const change = () => {
    // aa = {d:{e:{f:1000}}}
    // aa.a = { b: { c: 2 } };
    // aa.a.b = {c:110}
    // aa.a.b.c = 110
    aa.a.b.c++
};
</script>

#5，shallowReadonly

作用：定义一个reactive变量，只有第一层是只读的。
语法：const obj = shallowReadonly({a:{b:9}})

// Demo.vue

<template>
  <h1>shallowReadonly的使用</h1>
  <h2>{{ mm }}</h2>
  <button @click="change">change</button>
</template>

<script setup>
import { shallowReadonly, reactive } from "vue";

// shallowReadonly只有第1层是只读的
// 第一层：a  d
// 第二层：b
// 第三层：c
const mm = shallowReadonly(reactive({ a: { b: { c: 1 } }, d: 2 }));
const change = () => {
    // mm.d++  // 不能改
    mm.a.b.c++; // 可以改
};
</script>