vue3-toRef函数

toRef转化响应式数据包装成对象。value存放值的位置

toRefs函数定义转化响应式中所有属性为响应式数据

toRefs是函数，转化响应式对象中所有属性为单独响应式数据，对象成为普通对象

<template>
  <div>
    <div>{{ name }}</div>
    <button @click="updatename">修改</button>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1.响应式数据对象
    const obj = reactive({
      name: 'ls',
      age: 18
    })
    // let { name } = obj  出来的是一个普通数据
    const name = toRef(obj, 'name')
    // 2.模板中只需要使用name数据
    // 注意：从响应式数据对象中结构出的属性数据，不再是响应式数据
    // 修改名字
    const updatename = () => {
      console.log(name);
      // toRef转化响应式数据包装成对象。value存放值的位置
      // 使用场景 ：已经有一个响应式对象，但是只用到对象中的某个属性，通过toRef解构
      name.value = "zs"
    }
    return { name, updatename }
  }
}
</script>

<style>
</style>

，通常用于解构|展开reactive定义对象

<template>
  <div>
    <div>{{ obj2.name }}</div>
    <div>{{ obj2.age }}</div>
    <button @click="updateName">修改</button>
  </div>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup () {

    const obj = reactive({
      name: 'ls',
      age: 18
    })
    console.log(obj);
    // 2.结构或者展开响应式数据对象
    const { name, age } = obj
    // const obj2 = { ...obj }
    const obj2 = toRefs(obj)
    console.log(obj2);
    // 
    const updateName = () => {
      obj2.name.value = "zz",
        obj.age = 25
    }
    return { obj2, updateName }
  }
}
</script>

<style>
</style>