vue3组合API（二）

1，shallowRef

作用：对复杂层级的对象，只将其第一层变成 ref 响应。 (性能优化)
语法：const x = shallowRef({a:{b:{c:1}}, d:2}) 如此a、b、c、d变化都不会自动更新，需要借助 triggerRef 来强制更新。

// Demo.vue

<template>
  <h1>shallowRef的使用</h1>
  <h1 v-text="info1.a.b.c"></h1>
  <button @click="add1">自增</button>
  <hr />

  <h1 v-text="info2.a.b.c"></h1>
  <button @click="add2">自增</button>
</template>

<script setup>
import {shallowRef,ref,triggerRef} from "vue"

// let info1 = ref("wc");
// ref是定义基本数据数据的响应式
// reactive是定义引用数据类型的响应式
// 其实ref也可以定义，如果ref中写了一人引用数据类型，它的内部还是会调用reactive
let info1 = ref({a:{b:{c:3}}});
console.log(info1.value.a.b.c);
let add1 = ()=>{
    info1.value.a.b.c++
}
// -------------------

// {a:{b:{c:3}}} 整体替换的话是响应式的，对a,b,c修改并不是响应式的
let info2 = shallowRef({a:{b:{c:3}}});
console.log(info2.value.a.b.c);
let add2 = ()=>{
    // info2.value = {a:{b:{c:10000}}}
    // info2.value.a = {b:{c:10000}}
    // info2.value.a.b = {c:10000}
    // info2.value.a.b.c = 10000
    info2.value.a.b.c++

    triggerRef(info2); // 强制刷新页面
}


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

#2，triggerRef

作用：强制更新一个 shallowRef对象的渲染。
语法：triggerRef(shallowRef对象)

参考上例

#3，reactive

作用：定义响应式变量，一般用于定义引用数据类型。如果是基本数据类型，建议使用ref来定义。
语法：const info = reactive([] | {})

// Demo.vue

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

<script setup>
import {reactive} from "vue"
let obj = {a:1,b:2,c:3}
let user = reactive(obj);

let add = ()=>{
    user.a++
}

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

#4，readonly

作用：把一个对象，变成只读的。
语法：const rs = readonly(ref对象 | reactive对象 | 普通对象)

// Demo.vue

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


<script setup>
import {reactive,readonly,isReadonly,ref} from "vue"
let obj = {a:1,b:2}
let user = reactive(obj);

// readonly(ref对象 | reactive对象 | 普通对象)
// readonly它内部是拦截的set
let info = readonly({c:3,d:4}); // info叫readonly对象
let user2 = readonly(user)
let foo = ref(100);
let foo2 = readonly(foo)
let xx = 666;

let add = ()=>{
    // key "a" failed: target is readonly. 
    // a是只读，只能使用，不能修改
    user2.a++; // 不能
}

console.log(isReadonly(info)); // true
console.log(isReadonly(user2)); // true
console.log(isReadonly(foo2)); // true
console.log("---------");
console.log(isReadonly(foo));
console.log(isReadonly(user));
console.log(isReadonly(xx));
</script>
<style lang="less" scoped>
</style>

#5，isReadonly

作用: 判断一个变量是不是只读的。
语法：const bol = isReadonly(变量)

参考上例

#6，isReactive

作用：判断一变量是不是 reactive的。
注意：被 readonly代理过的 reactive变量，调用 isReactive 也是返回 true的。

// Demo.vue

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

<script setup>
import { reactive, readonly, ref, isReactive } 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++;
};
// 如果readonly包了一个reactive，这个readonly也是reactive
// 如果readonly包了一个ref，这个readonly不是reactive
console.log(isReactive(user2));
console.log(isReactive(user));
console.log(isReactive(foo2));
console.log(isReactive(foo));
console.log(isReactive(info));
console.log(isReactive(xx));

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