【Vue3】refs （持续更新）

目录

• ref
• unref
• toRef
• toRefs
• customRef

ref

接受一个值，返回一个响应式并且可变的 ref 对象。ref 对象具有指向值的单个属性的值。

实例

<template>
    <div>
      {{count}}
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
    setup() {
        const count = ref(0)
        console.log(count.value) // 0
        count.value++
        console.log(count.value) // 1
        return {
          count
        }
    }
})
</script>

unref

如果参数为 ref，则返回内部值，否则返回参数本身，这是 val = isRef(val) ? val.value : val

实例

<template>
    <div>
      {{count}}
    </div>
</template>

<script>
import { defineComponent, isRef, unref, ref } from 'vue'

export default defineComponent({
    setup() {
        const count = ref(0)
        console.log(count.value) // 0
        count.value++
        console.log(count.value) // 1
        
        console.log("count===>", isRef(count))
        const cunt = unref(count)

        console.log("cunt====>", cunt, isRef(cunt))

        return {
          count
        }


    }
})
</script>

toRef

可以用来为源响应式对象上的某个 property 新创建一个 ref。然后，ref 可以被传递，它会保持对其源 property 的响应式连接。

实例

<template>
    <div>
    
    </div>
</template>

<script>
import { defineComponent, reactive, toRef } from 'vue'

export default defineComponent({
   setup() {
    const state = reactive({
      foo: 1,
      bar: 2,
    })
 
    const fooRef = toRef(state, 'foo')
 
    fooRef.value++
    console.log(state.foo) // 2
 
    state.foo++
    console.log(fooRef.value) // 3
  },


})
</script>

当您要将 prop 的 ref 传递给复合函数时，toRef 很有用：

export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }

toRefs

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

实例一

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

const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2

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

当从组合式函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开：

实例二

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

  // 操作 state 的逻辑

  // 返回时转换为ref
  return toRefs(state)
}

export default {
  setup() {
    // 可以在不失去响应性的情况下解构
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}

toRefs 只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref，则应当使用 toRef。

customRef

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

实例

<template>
  <div>
    <input v-model="text" />
    {{text}}
  </div>
</template>
 
<script>
import { customRef } from 'vue'
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)
      },
    }
  })
}
export default {
  setup() {
    return {
      text: useDebouncedRef('hello'),
    }
  },
}
</script>