shallowReactive 与 shallowRef

1. shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
2. shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理。
3. 什么时候使用？
   • 如果有一个对象数据，结构比较深，但变化时只是外层属性变化===> shallowReactive。
   • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===> shallowRef。

readonly 与 shallowReadonly

1. readonly：让一个响应式数据变为只读的（深只读）。
2. shallowReadonly：让一个响应式数据变为只读的（浅只读）。
3. 应用场景：不希望数据被修改时。

toRaw 与 markRaw

1. toRaw
   • 作用：将一个由 reactive 生成的响应式对象转为普通对象。
   • 应用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
2. markRaw
   • 作用：标记一个对象，使其永远不会再成为响应式对象。
   • 应用场景：
     • 有些值不应被设置为响应式的，例如复杂的第三方类库等。
     • 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

自定义 ref

1. 作用：创建一个自定义的 ret，并对其依赖项跟踪和更新触发进行显式控制。
2. 代码实现

App.vue

<template>
    <input type="text" v-model="keyword">
    <h3>{{ keyword }}</h3>
</template>

<script>
import { customRef, ref } from 'vue';

export default {
    name: 'Vue3App',
    setup() {
        const myRef = (value) => {
            return customRef((track, trigger) => {
                return {
                    get() {
                        track();		// 告诉 Vue 这个 value 值需要被追踪
                        return value
                    },
                    set(newValue) {
                        value = newValue;
                        trigger();		// 告诉 Vue 重新解析模板
                    }
                }
            })
        };

        let keyword = myRef('hello');
        return { keyword }
    },
};
</script>

provide 与 inject

1. 作用：实现祖孙组件数据传定，也可以说是给后代组件传数据。

2. 实现过程：

   • 祖组件通过 provide 发送数据，参数一数据名，参数儿数据。
   • 子组件通过 inject 接受数据，唯一的参数是参数名。

3. 代码

   • 祖组件

     setup() {
     	let user = reactive({
     		name: 'iGma',
     		age: 20
     	});
     	provide('user', user);
       
     	return { ...toRefs(user) }
     },

   • 后代组件

     setup() {
         let user = inject('user');
         
         return { ...toRefs(user) }
     },

响应式数据的判断

1. isRef: 检查一个值是否为一个 ref 对象
2. IisReactive:检查一个对象是否是由 reactive 创建的响应式代理
3. isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
4. isProxy:检查一个对象是否是由 reactive 或者 readonly 方法创建的代理