Vue 3 refs 学习
refs
接受一个值，返回一个响应式并且可变的 ref 对象。ref 对象具有指向值的单个属性的值。
示例：
<template>
<div>
{{ count }}
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
return {
count,
}
},
}
</script>
如果将对象分配为 ref 值，则可以通过 reactive 方法使该对象具有高度的响应式。
unref
如果参数为 ref，则返回内部值，否则返回参数本身，这是 val = isRef(val) ? val.value : val
示例：
<template>
<div>
{{ count }}
</div>
</template>
<script>
import { ref, isRef, unref } from 'vue'
export default {
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
可以用来为源响应式对象上的属性创建一个新的 ref,然后可以将 ref 传递进去，从而保持对其源属性的响应式链接。
示例：
<template>
<div>
{{ count }}
</div>
</template>
<script>
import { toRef, reactive } from 'vue'
export default {
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
return {
count,
}
},
}
</script>
当您要将 prop 的 ref 传递给复合函数时，toRef 很有用：
export default {
setup(props) {
useSomeFeature(toRef(props, 'foo'))
}
}
toRefs
将响应式对象转换为普通对象，其中结果对象的每一个属性都是指向相应的属性的 ref.
示例：
<template>
<div>
</div>
</template>
<script>
import { toRef, reactive } from 'vue'
export default {
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>
toRefs
<template>
<div></div>
</template>
<script>
import { toRefs, reactive } from 'vue'
export default {
setup() {
const state = reactive({
foo: 1,
bar: 2,
})
const stateAsRefs = toRefs(state)
/*
Type of 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
},
}
</script>
当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散：
function useFeatureX() {
const state = reactive({
foo: 1,
bar: 2
})
// 逻辑运行状态
// 返回时转换为ref
return toRefs(state)
}
export default {
setup() {
// 可以在不失去响应性的情况下破坏结构
const { foo, bar } = useFeatureX()
return {
foo,
bar
}
}
}
customRef
创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并应返回一个带有 get 和 set 的对象。
使用 v-model 使用自定义 ref 实现 debounce 的示例：
<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>
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-12-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
