toRef----uso básico de toRefs

aRef

contenido

El rol de la función toRef: convertir una propiedad en el objeto de respuesta en datos de respuesta separados, y el valor convertido se asocia con el anterior (la función ref también se puede convertir, pero el valor no está asociado).

<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>

aRefs

contenido

El rol de la función toRefs: convierte todos los atributos en el objeto de respuesta en datos de respuesta separados, y el valor convertido se asocia con el anterior.

<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>