刚做了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>