傑森前端

解決的問題

可以在模板中少寫一層屬性取值，並且保持全部層級的雙向綁。（保持響應式數據的引用關係）

toRef

創建一個ref物件,其中裡面的value指向的是某個響應式物件中的屬性(也就是能保持引用關係)

語法：toRef(object,key)

toRefs

功能與toRef一樣不過可以批量使用

範例

先引入

import { reactive, toRef, toRefs } from 'vue'

js

export default {
  setup() {
    let person = reactive({
      name: 'jason',
      age: 18,
      job: {
        j1: {
          salary: 100
        }
      }
    })
    function changeName() {
      person.name = 'jack'
      person.age = 20
      person.job.j1.salary = 1000
    }
    // const {name} = toRefs(person) //這樣也可以
    return {
      name: toRef(person, 'name'), //單一
      salary: toRef(person.job.j1,'salary') //這樣可以取出比較深的物件
      ...toRefs(person), //toRefs後會是一個物件直接解構使用即可使用
      changeName
    }
  }
}

模板

<template>
  {{ name }}
  {{ age }}
  {{ job.j1.salary }}
  {{ salary }}
  <button @click="changeName">changeName</button>
</template>

https://jinxiaoliang.cn/V/227.html