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>