vue3中compoisitonAPI(2)

1.toRefs和toRef

 //reactive包裹后的对象是响应式的,但是对象里面的数据进行解构之后不是响应式的
const info = reactive({ name: 'jack', age: 18 })
 //1. torefs:将reactive对象中的所有属性都转换为ref对象,数据是可响应的
 let { name, age } = toRefs(info)
//2.toref 将单个属性成员转换为ref对象,数据是可响应式的
  const age = toRef(info, 'age')
  //两者都传入的对象是reactive对象(可响应式对象)
  const btnclick = () => {
    //转换成ref对象后通过.value形式获取相应的值
      age.value++
    }

2.自定义ref customRef

实现一个简易防抖操作，先双向绑定一个输入框

实现Debounce操作

import { customRef } from 'vue'

export default function (value, delay = 1000) {
  //设置定时器
  let timer = null
  //返回一个customRef
  return customRef((track, trigger) => {
    return {
      get() {
        //收集依赖
        track()
        return value
      },
      set(newValue) {
        //清除定时器(在定时器没有结束并且又触发了响应,需要清除原来的定时器)
        clearTimeout(timer)
        timer = setTimeout(() => {
          value = newValue
          //触发响应
          trigger()
        }, delay);
      }
    }
  })
}

3.其他的API

• unref
  1.如果我们想要获取一个ref引用中的value，那么也可以通过unref方法：
  2.如果参数是一个 ref，则返回内部值，否则返回参数本身；
  3.这是 val = isRef(val) ? val.value : val 的语法糖函数；
• isRef
  1.判断值是否是一个ref对象
• shallowRef
  1.创建一个浅层的ref对象
• triggerRef
  1.手动触发和 shallowRef 相关联的副作用