就是ref的一些功能Api

unref

  • val =isRef(val)?val.value:val 的语法糖
  • 做的一个解构处理，如果参数是一个 ref 则返回它的 value

toRef、toRefs

  • toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。（所以你直接定义一个reactive数据不好吗- -？）
  • toRefs 把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。

区别：toRef是reactive对象中单个属性，而toRefs则是该reactive整个对象

const state = reactive({ name: 'jackie', age: 12 })
const ageRef = toRef(state, 'name') // toRef的第一个参数为该reactive对象，第二个参数为该对象中的某一属性

const state = reactive({
  foo: 1,
  bar: 2,
})
const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型如下:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/
// 也就是拿到将这整个reactive转换为ref，每条属性的响应式不会丢失

isRef

检查一个值是否为一个 ref 对象。 注：需要注意的是isRef（toRef）返回true;isRef（toRefs）返回false;检测的是一个值，而不是对象

isProxy

检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。

isReactive

检查一个对象是否是由 reactive 创建的响应式代理。

如果这个代理是由 readonly 创建的，但是又被 reactive 创建的另一个代理包裹了一层，那么同样也会返回 true。

isReadonly

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

例子

<template>
  <Child :state="state" />
  <button @click="btnClick">click</button>
  <!-- {{ person.name }}---{{ person.age }} -->

  {{ count.title }}
  <div>{{ fruit }}</div>
</template>

<script>
import {
isRef,
reactive,
toRef,
toRefs,
isProxy,
isReactive,
isReadonly,
readonly,
ref
} from 'vue'
import Child from './Child'
export default {
  components: { Child },
  setup() {
    // const toUnref = () => {
    //   alert(unref(count))
    // }
    // const person = ref({name:'jackie',age:12})
    const state = reactive({ name: 'jackie', age: 12 })
    const newState = reactive({ name: 'jackie', age: 1212 })
    const stateRef = toRefs(newState)
    const ageRef = toRef(state, 'name')
    const count = reactive({ title: readonly('tomato') })
    const fruit = readonly(ref('banana'))
    console.log(isRef(stateRef), 'isRef') //false 检查一个值是否为一个 ref 对象。
    console.log(isRef(ageRef), 'isRef') //true检查一个值是否为一个 ref 对象。
    console.log(isProxy(state), 'isProxy') //true 检查一个对象是否是由 reactive 方法创建的代理。
    console.log(isProxy(stateRef), 'isProxy') //false 检查一个对象是否是由 reactive/readonly  方法创建的代理。
    console.log(isReactive(count), 'isReactive') //true 检查一个对象是否是由reactive 创建的响应式代理(readonly包裹一层也算)。
    console.log(isReadonly(fruit), 'isReadonly') //false检查一个对象是否是由 reactive 创建的响应式代理。
    console.log(fruit.value, 'isReadonly') //true  检查一个对象是否是由 readonly 创建的只读代理。


    const btnClick = () => {
      state.name = 'chen'
    }
    return {
      state,
      ageRef,
      newState,
      fruit,
      //  toUnref,
      count,
      btnClick
    }
  }
}
</script>
赏

爬。