Vue3中的toRef和toRefs的区别和用法
刚做了Ref和Reactive区别及使用方法笔记,再来总结一下,toRef
和 toRefs
的作用、用法、区别
1、作用和区别
toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新。
toRef
: 复制 reactive 里的单个属性并转成 ref
toRefs
: 复制 reactive 里的所有属性并转成 ref
2、使用方式
2.1 toRef使用示例
<template><h2>reactive-name: {{ user.name }} </h2><h2>toRef-name: {{ uName }}</h2><button @click="onChangeName">点击</button>
</template><script>
import { reactive, toRef } from 'vue'
export default {setup() {let user = reactive({name: 'zs',age: 18})// 复制 user 里的 name 属性let uName = toRef(user, 'name')// 更改 const onChangeName = () => {uName.value = 'ls'}return {user,uName,onChangeName}}
}
</script>
2.2 toRefs使用示例
<template><h2>{{ name }} </h2><h2>{{ age }}</h2>
</template><script>
import { reactive, toRef } from 'vue'
export default {setup() {let user = reactive({name: 'zs',age: 18}) return {...toRefs(user),}}
}
</script>