vue3 ref 、unref 、toRef、toRefs
vue3 ref 、unref 、toRef、toRefs 的使用
·
ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value属性
,指向该内部值。
示例
const count = ref(0)
console.log(count.value) // 0
如果将对象分配为 ref 值,则它将被 reactive 函数处理为深层的响应式对象
unref
如果参数是一个ref,则返回内部值,否则返回参数本身。这是 val = isRef(val) ? val.value : val
的语法糖函数。
import { unref } from "vue";
let msgref = ref('你好')
console.log(unref(msgref)) // 你好
let msg = '你好'
console.log(unref(msg)) // 你好
toRef
可以用来为源响应式对象上的某个 property 新创建一个 reactive。然后,ref 可以被传递,它会保持对其源 property 的响应式连接。
const state = reactive({
foo: 1,
bar: 2
})
const fooRef = toRef(state, 'foo')
console.log(fooRef.value)
fooRef.value++
console.log(fooRef.value) //2
console.log(state.foo) //2
state.foo++
console.log(fooRef.value) // 3
console.log(state.foo ) //3
toRefs
将响应式对象转换为普通对象,其中结果对象的每个 property 都是指向原始对象相应 property 的 ref
import { reactive, toRefs } from "vue";
const state = reactive({
foo: 1,
bar: 2
})
const stateAsRefs = toRefs(state)
// ref 和原始 property 已经“链接”起来了
state.foo++
console.log(stateAsRefs.foo.value) // 2
console.log(state.foo) //2
stateAsRefs.foo.value++
console.log(state.foo) // 3
console.log(stateAsRefs.foo.value) //3
toRef 和 toRefs 都是复制,它复制的其实就是引用 + 响应式 ref
toRef和 加toRefs的区别
toRef: 复制 reactive 里的单个属性并转成 ref
toRefs: 复制 reactive 里的所有属性并转成 ref
toRefs
只会为源对象中包含的 property 生成 ref。如果要为特定的 property 创建 ref,则应当使用 toRef
isRef
检查值是否为一个 ref 对象。
import { reactive, ref,isRef } from "vue";
let info = reactive({ user: 'John Doe' })
const state = ref({
foo: 1,
bar: 2
})
console.log(isRef(state)) // true
console.log(isRef(info)) // false
更多推荐
已为社区贡献4条内容
所有评论(0)