Vue3笔记_03(组合式API)toRef

导入

需求：
后端返回的数据是一个嵌套式数据(info)，这些数据都需要在页面上进行渲染、修改; ->将其定义为一个响应式数据return出去；
但是呢有的数据使用比较频繁，比如 name(简单数据类型),soninfo(引用数据类型); 为了更方便使用 -> 定义为一个变量return出去

html

<template>
  <div>为了测试展示全部信息->{{info}}</div>
  <h1>name:{{name}}</h1>
  <h1>sonname:{{soninfo.name}}</h1>
  <button @click="name+='~'">点我修改info.name</button>
  <button @click="soninfo.name += '~'">点我修改soninfo.name</button>
</template>
1
2
3
4
5
6
7

js1

<script>
import {reactive} from 'vue'
export default{
  setup(){
    // 将后端返回得数据定义为一个响应死数据
    let info=reactive({
      name:'xiangxiang',
      age:'48',
      soninfo:{
        name:'niuniu',
        age:24,
        grandinfo:{
          name:'hengheng',
          age:2
        }
      }
    })

    // 采用直接赋值的形式定义一个变量
    let name = info.name
    let soninfo = info.soninfo
   
    return{
      info,
      name:name,
      soninfo:soninfo
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 发现

  • 初次渲染没有问题；

  • 当 点击“点我修改info.name”按钮时 页面内容无变化(即使数据已经改变了)；

    • 页面
      • name无变化
      • info对象里面的name也无变化；
    • 打印
      • name已经变化了
      • info对象里面的name无变化
    • 总结：name 为非响应式数据且与info对象里面的name属性没有关联了

  • 当 点击“点我修改soninfo.name”按钮时。页面内容能正常渲染；

    • soninfo 与 info.soninfo 会对应实时改变

采用直接赋值形式，为什么简单数据类型不能正常修改，而引用类型却可以正常修改呢？

  // 定义一个变量
  let name = info.name
  console.log(name) // 'xiangxiang'
  let soninfo = info.soninfo 
  console.log(soninfo) // Proxy {name: 'niuniu', age: 24, grandinfo: {…}}
1
2
3
4
5

• 通过打印发现
  • 简单数据类型赋值， 赋值的是值 -> 因此获取到的只是一个字符串(非响应式数据)
  • 引用数据类型赋值， 赋值的是引用地址 -> 因此获取到的是一个Proxy实例对象(响应式数据)

如果想要简单数据类型赋值应该怎样才能获取一个响应式数据呢？
—> 使用组合APItoRef函数

toRef函数

语法

// 引入
import {reactive,toRef} from 'vue'

// 使用
let 变量名 = toRef(reactive对象，属性名)
1
2
3
4
5

作用

创建一个 ref 对象，其value值指向另一个对象中的某个属性;

使用时机

当要将响应式对象中的某个值为简单数据类型的属性单独提供给外部使用时就使用toRef;

举例说明

导入中的例子使用toRef就可以实现了

<template>
  <div>为了测试展示全部信息->{{info}}</div>
  <h1>name:{{name}}</h1>
  <h1>sonname:{{soninfo.name}}</h1>
  <button @click="name+='~'">点我修改info.name</button>
  <button @click="soninfo.name += '~'">点我修改soninfo.name</button>
</template>
<script>
import {reactive,toRef} from 'vue'
export default{
  setup(){
    let info=reactive({
      name:'xiangxiang',
      age:'48',
      soninfo:{
        name:'niuniu',
        age:24,
        grandinfo:{
          name:'hengheng',
          age:2
        }
      }
    })

    // 定义一个变量
    let name = toRef(info,'name')
    let soninfo = info.soninfo 
     
    return{
      info,
      name:name,
      soninfo:soninfo
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36