最新版vue3+TypeScript开发入门到实战教程之toRefs与toRef实用技巧

toRefs与toRef概述

引用官网的一句话，将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象响应属性的ref。每个单独的ref都是使用toRef创建的。

反复读几次，发现还是有些懵，不易理解。通过一些事例，一步步解读，再回头看看这句，就不难理解。

给响应式对象结构解析赋值

对象结构解析，是很常用且舒适的获取对象成员的方法，若下代码

let fish = { name: '鲫鱼', price: 10 };
let { name, price } = fish;
console.log(name);
console.log(price);
name = '草鱼'
price = 20;
console.log(fish);

运行打印输出。我们发现，name，age能够得到fish中的值，但改变name、age并不能改变fish中的值。如下图：

若将响应式对象结构解析，获取到的成员变量是否是响应式的。

• 定义响应式对象fish，let fish = reactive({ name: '鲫鱼', price: 10 })

• 解析fish数据，let { name, price } = fish;

• 模版分别渲染name，price，fish内数据

• 改变name，price，fish内数据
  具体代码如下：

  <template>

  鱼类1：{{ fish.name }}

  价格1：{{fish.price }}

  鱼类2：{{ name }}

  价格2：{{price }}

  <button @click="changeName1">改变鱼类1</button> <button @click="changePrice1">改变价格1</button>
  <button @click="changeName2">改变鱼类2</button> <button @click="changePrice2">改变价格2</button> </template> <script setup> import { reactive } from 'vue' let fish = reactive({ name: '鲫鱼', price: 10 }); let { name, price } = fish; function changeName1() { fish.name += '~' console.log(name); } function changeName2() { name += '~' console.log(fish.name) } function changePrice1() { fish.price += 1; console.log(price) } function changePrice2() { price += 1; console.log(fish.price) } </script>

运行点击改变鱼类1 与改变价格1 按钮，页面中只有鱼类1、价格1做响应变化。点击改变鱼类2 与改变价格2页面无任何变化。

• 改变fish.name，页面响应改变，name不变
• 改变fish.price，页面响应改变，price不变
• 改变name，页面无响应，pirce.name不变
• 改变price，页面无响应，price.name不变
  结论是name只是从fish.name获取到值，与fish.name再没有关系，也不是响应式对象，同理price。
  操作效果如下图
  

toRefs将响应式对象结构解析数据变成响应式

toRefs函数，将响应式对象内的数据，与解析后的数据划上一个等号，两者是同一个东西。如下代码

let fish = reactive({ name: '鲫鱼', price: 10 });
let { name, price } = toRefs(fish);

• name是fish.name一个引用。name变，fish.name变；fish.name变，name变

• 同理，price和fish.price也是如此。

• name与price变成ObjectRefImpl 结构数据，ObjectRefImpl结构都是用ref定义的

• 访问改变name、price数据时，都需加.value

  <template>

  鱼类1：{{ fish.name }}

  价格1：{{fish.price }}

  鱼类2：{{ name }}

  价格2：{{price }}

  <button @click="changeName1">改变鱼类1</button> <button @click="changePrice1">改变价格1</button>
  <button @click="changeName2">改变鱼类2</button> <button @click="changePrice2">改变价格2</button> </template> <script setup> import { reactive, toRefs } from 'vue' let fish = reactive({ name: '鲫鱼', price: 10 }); let { name, price } = toRefs(fish); function changeName1() { fish.name += '~' console.log(fish); console.log(name);

  }
  function changePrice1() {
  fish.price += 1;
  }
  function changeName2() {
  name.value += '~'
  }

  function changePrice2() {
  price.value += 1;
  }
  </script>

运行查看效果，分别点击四个按钮，页面都有变化，控制台打印输出fish与name，查看两者区别

toRef将响应式对象中的一个数据变成响应式

在实际应用开发中，可能并不需要将所有的成员变量都变成响应式，只需要其中一个，那就使用toRef。使用方法很简单

let fish = reactive({ name: '鲫鱼', price: 10 });
let name = toRef(fish,'name');
console.log(name);

打印name其结构如下：

toRefs返回值到底是什么

let fish = reactive({ name: '鲫鱼', price: 10 });
console.log(fish)
console.log(toRefs(fish))

如图

我们看看，fish下的name与price都变成ref定义的数据。回头再来看看官网说明，是否都明白了。
将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象响应属性的ref。每个单独的ref都是使用toRef创建的。