Reactive判断的API

isProxy
检查对象是否是由 reactive 或 readonly创建的 proxy。

isReactive
检查对象是否是由 reactive创建的响应式代理：
如果该代理是 readonly 建的，但包裹了由 reactive 创建的另一个代理，它也会返回 true；

isReadonly
检查对象是否是由 readonly 创建的只读代理。

toRaw
返回 reactive 或 readonly 代理的原始对象（不建议保留对原始对象的持久引用。请谨慎使用）。

shallowReactive
创建一个响应式代理，它跟踪其自身 property 的响应性，但不执行嵌套对象的深层响应式转换 (深层还是原生对象)。

shallowReadonly
创建一个 proxy，使其自身的 property 为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）。

toRef & toRefs

如果我们使用ES6的解构语法，对reactive返回的对象进行解构获取值，那么之后无论是修改结构后的变量，还是修改reactive 返回的state对象，数据都不再是响应式的：

const info = reactive({name: "why", age: 18});
let {name, age} = info; //数据不再是响应式
 
 
让我们解构出来的属性是响应式的呢？
let { name, age } = toRefs(info);
 
如何只解析其中一个属性？
let age = toRef(info, "age");
 
const changeAge = () => {
        age.value++; //解构出来的是一个 ref 对象，因此 .value 调用内部的值
      }

ref其他的API

unref
如果我们想要获取一个ref引用中的value，那么也可以通过unref方法：

• 如果参数是一个 ref，则返回内部值，否则返回参数本身；
• 这是 val = isRef(val) ? val.value : val 的语法糖函数；

isRef
判断值是否是一个ref对象。

shallowRef
创建一个浅层的ref对象；

triggerRef
手动触发和 shallowRef 相关联的副作用：

import { ref, shallowRef, triggerRef } from 'vue';
 
const info = shallowRef({name: "why"})
 
      const changeInfo = () => {
        info.value.name = "james"; //值这么改不是响应式的没因为 shallowRef 是一个浅层  ref 对象， 内部的 那么不再是响应式的值
        triggerRef(info); // 这样手动触发让  info.value.name 值在界面上能发生变化
      }

customRef

创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制：

• 它需要一个工厂函数，该函数接受 track 和 trigger 函数作为参数；
• 并且应该返回一个带有 get 和 set 的对象

Demo : 双向绑定的属性进行debounce(节流)的操作
也就是在文本框输入文字的时候，不是每敲一个字母就频繁的响应，而是敲击字母之后间隔了一段时间没有敲，才开始双向绑定。

hook 中的 useDebounceRef.js 文件code

import { customRef } from 'vue';
 
// 自定义ref
export default function(value, delay = 300) {
  let timer = null;
  return customRef((track, trigger) => {
    return {
      get() {
        track(); //获取的时候直接获取
        return value;
      },
      set(newValue) { //设置的时候判断一些键盘敲击的时间，用了一个简单的防抖函数的原理
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      }
    }
  })
}

 其他组件引入useDebounceRef.js code

<template>
  <div>
    <input v-model="message"/>
    <h2>{{message}}h2>
  div>
template>
 
<script>
  import debounceRef from './hook/useDebounceRef';
 
  export default {
    setup() {
      const message = debounceRef("Hello World");
 
      return {
        message
      }
    }
  }
script>