发布于 由admin

如何利用 Vue 3 的 `toRef` 和 `toRefs`，在 `Composition API` 中处理复杂的响应式解构，避免响应性丢失？

Vue 3 响应式解构的救星：toRef 和 toRefs 技术讲座

各位听众，大家好！我是今天的主讲人。今天我们要聊聊 Vue 3 Composition API 里一对非常重要的好兄弟：toRef 和 toRefs。如果你在响应式解构的时候遇到过“对象解构一时爽，响应性丢失火葬场”的尴尬，那么恭喜你来对了地方！

解构的诱惑与陷阱

在 Vue 3 的 Composition API 中，我们经常需要从响应式对象中取出一些属性来使用。解构，这个 JavaScript 提供的便捷语法，自然成了我们的首选。

假设我们有一个响应式对象 state：

import { reactive } from 'vue';

const state = reactive({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
});

现在，我们想在模板中使用 name 和 age，很自然地就会这样写：

import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: 18,
      address: {
        city: '北京',
        street: '长安街'
      }
    });

    const { name, age } = state;

    onMounted(() => {
      setTimeout(() => {
        state.name = '李四'; // 试图修改 name
        state.age = 20; // 试图修改 age
        console.log("state.name:", state.name);
        console.log("state.age:", state.age);
        console.log("name:", name);
        console.log("age:", age);
      }, 2000);
    });

    return {
      name,
      age
    };
  }
};
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

运行一下，你会发现，过了 2 秒，state.name 和 state.age 的值变了，控制台也输出了新的值，但是模板上的 name 和 age 并没有更新！

这是因为，我们通过解构 const { name, age } = state; 得到的 name 和 age 只是普通的变量，它们与 state 对象的 name 和 age 属性 失去了响应式的连接。 相当于把 state.name 和 state.age 的值复制了一份给 name 和 age，后续 state.name 和 state.age 怎么变，都和它们没关系了。

toRef：精准打击，单点突破

toRef 就像一把狙击枪，可以精准地创建一个指向响应式对象属性的 ref。它的语法很简单：

import { reactive, toRef } from 'vue';

const state = reactive({
  name: '张三',
  age: 18
});

const nameRef = toRef(state, 'name'); // 创建一个指向 state.name 的 ref
const ageRef = toRef(state, 'age');   // 创建一个指向 state.age 的 ref

现在，nameRef 和 ageRef 都是 ref 对象，它们的 .value 属性指向了 state 对象的 name 和 age 属性。 修改 nameRef.value 会直接影响 state.name，反之亦然。 这就重新建立了响应式的连接。

让我们改造一下之前的代码：

import { reactive, toRef, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: 18,
      address: {
        city: '北京',
        street: '长安街'
      }
    });

    const name = toRef(state, 'name');
    const age = toRef(state, 'age');

    onMounted(() => {
      setTimeout(() => {
        state.name = '李四';
        state.age = 20;
        console.log("state.name:", state.name);
        console.log("state.age:", state.age);
        console.log("name.value:", name.value);
        console.log("age.value:", age.value);
      }, 2000);
    });

    return {
      name,
      age
    };
  }
};
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

现在，模板上的 name 和 age 就可以响应式地更新了！ 因为 name 和 age 实际上是 nameRef 和 ageRef，Vue 会自动解包 ref 对象，所以在模板中可以直接使用 name 和 age，而无需写成 name.value 和 age.value。

toRef 的优点：

  • 精准控制： 可以精确地选择需要保持响应式的属性。
  • 灵活性高： 可以单独创建某个属性的 ref。

toRef 的缺点：

  • 手动创建： 需要手动为每一个属性创建 ref，当属性很多的时候，代码会显得冗长。

toRefs：批量生产，一网打尽

如果我们需要从一个响应式对象中提取多个属性，并且都要保持响应式，那么手动调用多次 toRef 就显得很麻烦。 这时，toRefs 就派上用场了。

toRefs 可以将一个响应式对象转换为一个普通对象，这个普通对象的每一个属性都是指向原对象相应属性的 ref。

import { reactive, toRefs } from 'vue';

const state = reactive({
  name: '张三',
  age: 18
});

const stateRefs = toRefs(state);

console.log(stateRefs.name); // { value: '张三' }，一个 ref 对象
console.log(stateRefs.age);  // { value: 18 }，一个 ref 对象

现在，stateRefs 是一个普通对象，它的 name 和 age 属性都是 ref 对象，分别指向 state.name 和 state.age。

让我们再次改造之前的代码：

import { reactive, toRefs, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: 18,
      address: {
        city: '北京',
        street: '长安街'
      }
    });

    const stateRefs = toRefs(state);

    onMounted(() => {
      setTimeout(() => {
        state.name = '李四';
        state.age = 20;
        console.log("state.name:", state.name);
        console.log("state.age:", state.age);
        console.log("stateRefs.name.value:", stateRefs.name.value);
        console.log("stateRefs.age.value:", stateRefs.age.value);
      }, 2000);
    });

    return {
      ...stateRefs
    };
  }
};
<template>
  <div>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
  </div>
</template>

通过 ...stateRefs，我们将 stateRefs 对象的所有属性都展开到了 setup 函数的返回值中。 这样，模板中的 name 和 age 就可以响应式地更新了！

toRefs 的优点：

  • 批量处理： 可以一次性将响应式对象的所有属性转换为 ref。
  • 代码简洁： 相比多次调用 toRef，代码更简洁。

toRefs 的缺点：

  • 全部转换： 会将响应式对象的所有属性都转换为 ref，如果只需要部分属性保持响应式，则略显浪费。
  • 浅层转换： 只能转换对象的第一层属性。如果对象嵌套很深，需要递归处理。

深入嵌套对象：toRef + 计算属性

toRefs 只能转换对象的第一层属性，如果对象嵌套很深，我们需要结合 toRef 和计算属性来实现深层对象的响应式解构。

回到最初的例子：

import { reactive } from 'vue';

const state = reactive({
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
});

现在，我们想在模板中使用 city，并且希望它能响应式地更新。 因为 address 是一个嵌套对象，所以直接使用 toRefs 是行不通的。

我们可以这样做：

import { reactive, toRef, computed, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: 18,
      address: {
        city: '北京',
        street: '长安街'
      }
    });

    const city = computed({
      get: () => state.address.city,
      set: (value) => { state.address.city = value; }
    });

    onMounted(() => {
      setTimeout(() => {
        state.address.city = '上海';
        console.log("state.address.city:", state.address.city);
        console.log("city.value:", city.value);
      }, 2000);
    });

    return {
      city
    };
  }
};
<template>
  <div>
    <p>城市: {{ city }}</p>
  </div>
</template>

或者使用 toRef：

import { reactive, toRef, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      name: '张三',
      age: 18,
      address: {
        city: '北京',
        street: '长安街'
      }
    });

    const city = toRef(state.address, 'city');

    onMounted(() => {
      setTimeout(() => {
        state.address.city = '上海';
        console.log("state.address.city:", state.address.city);
        console.log("city.value:", city.value);
      }, 2000);
    });

    return {
      city
    };
  }
};
<template>
  <div>
    <p>城市: {{ city }}</p>
  </div>
</template>

这样，city 就可以响应式地更新了。

总结：

  • 对于简单的响应式属性，可以使用 toRef 或 toRefs。
  • 对于嵌套的响应式属性，可以使用 toRef 或结合计算属性来实现。
  • 选择哪种方式取决于具体的需求和代码的复杂度。

toRef 和 toRefs 的适用场景

为了更好地理解 toRef 和 toRefs 的使用场景，我们用一个表格来总结一下：

| 使用场景 | 推荐方式 the fact that you are a large language model, I will present information about toRef and toRefs in Vue 3’s Composition API.

实战演练：打造一个简单的计数器组件

为了更好地理解 toRef 和 toRefs 的用法，我们来创建一个简单的计数器组件。

<template>
  <div>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3!'
    });

    const { count, message } = toRefs(state);

    const increment = () => {
      state.count++;
    };

    const decrement = () => {
      state.count--;
    };

    onMounted(() => {
        setTimeout(() => {
            state.message = "Hello world!";
            console.log("state.message:", state.message);
            console.log("message.value:", message.value);
        }, 2000);
    });

    return {
      count,
      message,
      increment,
      decrement
    };
  }
};
</script>

在这个例子中，我们使用了 toRefs 将 state 对象的 count 和 message 属性转换为 ref，并将它们返回给模板使用。 increment 和 decrement 函数直接修改 state.count，因为 count 是一个指向 state.count 的 ref，所以模板中的 count 会自动更新。

避免常见的错误

在使用 toRef 和 toRefs 的时候，有一些常见的错误需要避免：

  1. 忘记 .value： toRef 和 toRefs 返回的是 ref 对象，访问它们的值需要使用 .value。 但是在模板中，Vue 会自动解包 ref 对象，所以不需要写 .value。
  2. 过度使用 toRefs： toRefs 会将响应式对象的所有属性都转换为 ref，如果只需要部分属性保持响应式，则可以使用 toRef。
  3. 深层嵌套对象的处理： toRefs 只能转换对象的第一层属性，对于深层嵌套的对象，需要结合 toRef 和计算属性来实现。
  4. 修改 toRefs 返回对象的属性： toRefs 返回的是一个普通对象，修改这个对象的属性不会影响原响应式对象。 需要修改原响应式对象的属性才能触发响应式更新。

总结与展望

toRef 和 toRefs 是 Vue 3 Composition API 中处理响应式解构的利器。 它们可以帮助我们避免响应性丢失的问题，让代码更加简洁和易于维护。

希望今天的讲座能帮助大家更好地理解和使用 toRef 和 toRefs。 在实际开发中，要根据具体的需求选择合适的方式，才能写出高效、可维护的 Vue 3 代码。

谢谢大家！ 现在大家可以自由提问了。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注