vue3 toRef函数和toRefs函数

这篇我们看下toRef和toRefs的基本使用
我们知道ref可以用于创建一个响应式数据，而toRef也可以创建一个响应式数据，那他们之间有什么区别呢？
事实上，如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据是不会影响到原始数据。

<template>
 <div class="ToRefsDemo">
   <div>name: {{ name }}</div>
   <div>age: {{ age }}</div>
   <hr>
   <Demo1></Demo1>
 </div>
</template>
<script>
import { reactive, toRef } from 'vue'
import Demo1 from './toRefsDemo1'
export default {
  name: 'ToRefsDemo',
  components: {
    Demo1
  },
  setup () {
    let person = reactive({
      name: 'zs',
      age: 20
    })
    let name = toRef(person, 'name')
    let age = toRef(person, 'age')
    return {
      name,
      age
    }
  }
}
</script>

<style scoped>

</style>

小结：
ref和toRef的区别
(1). ref本质是拷贝，修改响应式数据不会影响原始数据；toRef的本质是引用关系，修改响应式数据会影响原始数据
(2). ref数据发生改变，界面会自动更新；toRef当数据发生改变是，界面不会自动更新
(3). toRef传参与ref不同；toRef接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性

<template>
 <div class="ToRefsDemo">
   <h1>{{ person }}</h1>
   <div>name: {{ name }}</div>
   <div>age: {{ age }}</div>
   <div>sary: {{ job.sary }}</div>
   <button @click="updateName">修改姓名</button>
   <button @click="addAge">添加年龄</button>
   <button @click="addSary">涨工资</button>
 </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'ToRefsDemo',
  setup () {
    let person = reactive({
      name: 'zs',
      age: 20,
      job: {
        sary: 3000
      }
    })
    const updateName = () => {
      person.name += '~~~'
    }
    const addAge = () => {
      person.age += 10
    }
    const addSary = () => {
      let { job } = person
      job.sary += 1000
    }
    return {
      person,
      updateName,
      addAge,
      addSary,
      ...toRefs(person)
    }
  }
}
</script>

<style scoped>

</style>