toRef----toRefs的基本用法

toRef

内容

toRef 函数的作用：转换响应式对象中某个属性为单独响应式数据，并且转换后的值和之前是关联的（ref 函数也可以转换，但值非关联）。

<template>
  <div class="container">
    <h2>{{ name }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { reactive, toRef } from 'vue'
  export default {
    name: 'App',
    setup() {
      const obj = reactive({
        name: 'ifer',
        age: 10
      })
      const name = toRef(obj, 'name')
      const updateName = () => {
        // 注意：需要使用 name.value 进行修改
        name.value = 'xxx'
        // 对 obj.name 的修改也会影响视图的变化，即值是关联的
        // obj.name = 'xxx' // ok
      }
      return { name, updateName }
    }
  }
</script>

toRefs

内容

toRefs 函数的作用：转换响应式对象中所有属性为单独响应式数据，并且转换后的值和之前是关联的。

<template>
  <div class="container">
    <h2>{{ name }} {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  export default {
    name: 'App',
    setup() {
      const obj = reactive({
        name: 'ifer',
        age: 10
      })
      const updateName = () => {
        obj.name = 'xxx'
        obj.age = 18
      }
      return { ...toRefs(obj), updateName }
    }
  }
</script>