概述:

正文：

此案例模拟了一个复杂的对象

<template>
  <p>采访受害者对象:</p>
  <p>受害者姓名:{{wyf.girlFriend.name}}</p>
  <p>受害者年龄:{{wyf.girlFriend.age}}</p>
  <p>受害者性别:{{wyf.girlFriend.gender}}</p>
  <p>来自受害者的警告:{{wyf.girlFriend.warning}}</p>
</template>


<script lang="ts">
import { ref, defineComponent, reactive } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  setup: () => {
    const wyf = reactive({
      name:'陨落巨星',
      age:'31',
      gender:'男',
      girlFriend:{
        name:'受害者',
        age:16,
        gender:'女',
        warning:'接受法律的制裁吧！'
      }
    })
    return {wyf}
  },
})
</script>

页面显示：

从上面的页面代码来看，我们只用到wyf.girlFriend中属性，每次访问的层次都比较深，为了简化访问深度。我们需要架构响应式数据。

<template>
  <p>采访受害者对象:</p>
  <p>受害者姓名:{{name}}</p>
  <p>受害者年龄:{{age}}</p>
  <p>受害者性别:{{gender}}</p>
  <p>来自受害者的警告:{{warning}}</p>
</template>


<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  setup: () => {
    const wyf = reactive({
      name:'陨落巨星',
      age:'31',
      gender:'男',
      girlFriend:{
        name:'受害者',
        age:16,
        gender:'女',
        warning:'接受法律的制裁吧！'
      }
    })
    //结构响应式数据
    let {name,age,gender,warning} = toRefs(wyf.girlFriend);


    return {name,age,gender,warning}
  },
})
</script>

toRefs将一响应式对象转化成一组ref,这些ref将保留到源对象的响应式连接。

toRef 为某个属性创建ref,参数有两个，一个是待结构的对象，一个是待结构的属性字符串。

<template>
  <p>采访受害者对象:</p>
  <p>受害者姓名:{{name}}</p>
  <p>受害者年龄:{{age}}</p>
  <p>受害者性别:{{gender}}</p>
  <p>来自受害者的警告:{{warning}}</p>
</template>


<script lang="ts">
import { defineComponent, reactive, toRef } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  setup: () => {
    const wyf = reactive({
      name:'陨落巨星',
      age:'31',
      gender:'男',
      girlFriend:{
        name:'受害者',
        age:16,
        gender:'女',
        warning:'接受法律的制裁吧！'
      }
    })
    //通过toRefs 结构响应式数据
    //const {name,age,gender,warning} = toRefs(wyf.girlFriend);


    //toRef 为某个属性创建ref
    const name = toRef(wyf.girlFriend,'name');
    const age = toRef(wyf.girlFriend,'age');
    const gender= toRef(wyf.girlFriend,'gender');
    const warning = toRef(wyf.girlFriend,'warning');
    
    return {name,age,gender,warning}
  },
})
</script>

【文章导航】

https://blog.csdn.net/yy763496668/article/details/113117040

THANKS ALL !!