【composition API】toRef/toRefs/isRef

230 阅读1分钟

toRef

toRef可以在原有的响应式对象上创建一个ref对象,与源对象的属性保持着密切的响应式的关联。

<script>
import { reactive, toRef } from 'vue'
export default {
    setup() {
    const state = reactive({
        a: 1,
        b: 2,
    })
    const aRef = toRef(state, 'a')
    aRef.value++
    console.log(state.a)  // 2
    
    state.a++
    console.log(aRef.value)  // 3
  }
}
</script>

toRef在一定的场景下是非常有用的,特别是配合ref传递给组合函数的时候。即使当前源属性不存在,也会返回一个可用的引用。

<script>
import { reactive, toRef } from 'vue'
function useName(val) {
    return `my name is ${val.value}`
}
export default {
    setup() {
        const state = reactive({
            name: '张三',
            age: 18
         })
         
         const name = useName(toRef(state, 'name'))
         console.log(name)  // 张三
    }
 }
</script>

toRefs

将响应式对象转换为普通对象,其中结果对象的每个属性都是ref指向原始对象的相应属性。

<template>
    <div>
        <div>{{ state.foo }}</div>
        <div>{{ state.bar }}</div>
    </div>
    <div>
        <div>{{ foo }}</div>
        <div>{{ bar }}</div>
    </div>
</template>
<script>
import { reactive, toRefs } from 'vue
export default {
    setup() {
        const state = reative({
            foo: 1,
            bar: 2
         })
        const stateAsRefs = toRefs(state)
        return {
            state,
            ...stateAsRefs
        }
     }
}
</script>

当我们遇到从组合函数返回响应式对象的场景很有用,以便消费组件可以解构/传播返回的对象而不会失去响应式:

<script>
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  return toRefs(state)
}

export default {
  setup() {
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}
</script>

isRef

isRef用来检查值是否为ref对象。

<script>
import { isRef, ref } from 'vue'
export default {
    setup() {
        const value = ref(0)
        const state = reactive({
            a: 1
        })
        const result1 = isRef(value)
        const result2 = isRef(state)
        
        console.log(result1)  // true
        console.log(result2)  // false
     }
}
</script>