vue3中ref、toRef、toRefs的区别

• ref—>原有数据的复制，修改数据不会影响原数据但UI界面会更新。
• toRef—>原有数据的引用，修改数据影响原数据但UI界面不更新

<template>
  <div>{{ name }}{{ age }}</div>
  <button @click="change">change</button>
</template>

<script>
import { toRefs, toRef } from 'vue'
export default {
  name: 'App',
  setup() {
    const obj = {
      name: 'zs',
      age: '22',
    }
    const name = toRef(obj, 'name')
    const age = toRef(obj, 'age')
    // 上述两行代码等价于下方注释代码，使用toRefs需要通过state.name.value进行值的修改
    // const state = toRefs(obj)
    function change() {
      name.value='xmz'
      age.value='65'
      console.log(obj)
    }
    return {
      name,
      age,
      change,
    }
  },
}
</script>

• toRefs可以看作toRef的语法糖,toRefs会遍历传入对象的属性。

const name=toRef(obj,'name')
const age=toRef(obj,'age')
通过name.value进行值的修改

等价于
const state=toRefs(obj)
通过state.name.value进行值的修改