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>