vue3 响应式：工具

isRef()

       判断是否为ref

<script setup lang="ts">
import { ref, computed, reactive, provide, isRef, unref, toRef, toRefs } from 'vue'

const refName = ref<string>('name')
const reactiveName = reactive<string>({ name: "name" })
const strName = 'name'


const examine = () => {
  console.log(isRef(refName));
  console.log(isRef(reactiveName));
  console.log(isRef(strName));

  /*
    打印结果
    App.vue: 10 true
    App.vue: 11 false
    App.vue: 12 false
  */

}
</script>
<template>
  <button @click="examine">检查是否为ref</button>
</template>

unref()

        如果参数是 ref，则返回内部值，否则返回参数本身。

        

<script setup lang="ts">
import { ref, computed, reactive, provide, isRef, unref, toRef, toRefs } from 'vue'

const refName = ref<string>('name')
const reactiveName = reactive<string>({ name: "name" })
const strName = 'name'


const examine = () => {
  console.log(unref(refName));
  console.log(unref(reactiveName));
  console.log(unref(strName));

  /*
    打印结果
    App.vue:10 name
    App.vue:11 Proxy(Object) {name: 'name'}
    App.vue:12 name
  */

}
</script>
<template>
  <button @click="examine">检查是否为ref</button>
</template>

toRef()

        将相应事对象转换为ref，修改值也会改变源对象，反之相同

const state = reactive({
  foo: 1,
  bar: 2
})

// 双向 ref，会与源属性同步
const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

但是下面这个是的ref不会更改因为传入的是一个纯数字类型

const state = reactive({
  foo: 1,
  bar: 2
})

// 双向 ref，会与源属性同步
const fooRef = toRef(state.foo)

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 1

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 1

toRefs()

        将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的

        

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)


// 每个属性都为ref
console.log(unref(stateAsRefs)); //{foo: ObjectRefImpl, bar: ObjectRefImpl}

/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 这个 ref 和源属性已经“链接上了”
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

       

isProxy()​

        检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly()        创建的代理。

isReactive()​

        检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

isReadonly()​

        检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。

        通过 readonly() 和 shallowReadonly() 创建的代理都是只读的，因为他们是没有 set 函数的 computed() ref。

toRaw()

        根据一个 Vue 创建的代理返回其原始对象。

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo) // true

customRef()

        创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

function useDebouncedRef(value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}