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>