如何在 Vue 3 中手动触发响应式更新？

如何在 Vue 3 中手动触发响应式更新？

Vue 3 是一个渐进式的 JavaScript 框架，以其灵活性和高性能而受到开发者的广泛欢迎。在 Vue 的响应式系统中，数据更改通常会自动触发视图更新，但有时我们需要手动触发响应式更新，这在处理复杂状态或外部数据时非常有用。本文将深入探讨如何在 Vue 3 中手动触发响应式更新，并通过示例代码来加深理解。

Vue 3 的响应式系统简介

在 Vue 3 中，响应式系统是基于 Proxy 技术实现的，这使得对对象和数组的操作能够被监听并进行追踪。当数据发生变化时，Vue 会触发相关的更新，使得视图能够反映出最新的数据状态。这种机制通常使得我们能够方便地维护状态，而无需手动干预。

手动触发更新的场景

在某些情况下，我们可能会遇到无法通过普通数据绑定方式获得预期结果的情境。例如，以下几种情况可能会导致我们需要手动触发响应式更新：

1. 嵌套对象的属性添加：在响应式对象中添加新属性时，Vue 不能自动追踪该属性的变化。
2. 外部数据源的更新：如从 API 拉取的数据更新需要在 Vue 的响应式系统内被处理。

为了能够更灵活地控制数据并手动触发更新，我们在使用 Vue 3 时通常会使用 ref 和 reactive 的组合，甚至利用 Vue 的方法来直接更新状态。

在 Vue 3 中手动触发更新的具体方法

使用 ref 和 reactive

在 Vue 3 中，ref 和 reactive 是创建响应式数据的两种重要方式。ref 主要用于基础数据类型，而 reactive 则用于对象和数组。

<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="updateTitle">更新标题</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const title = ref('Hello, Vue 3!');

    const updateTitle = () => {
      title.value = '标题已更新';
    };

    return {
      title,
      updateTitle
    };
  }
};
</script>

在上面的例子中，当用户点击更新标题按钮时，updateTitle 方法会被调用，手动更新 ref 所管理的 title 数据。这将自动触发视图的更新。

确保响应式的属性

有时我们需要在已有响应式对象上添加新属性，此时需要使用 Vue.set 方法。

<template>
  <div>
    <h1>响应式聊天室</h1>
    <input v-model="newMessage" placeholder="输入消息" />
    <button @click="sendMessage">发送消息</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      messages: [],
      newMessage: ''
    });

    const sendMessage = () => {
      if (state.newMessage.trim() !== '') {
        state.messages.push(state.newMessage);
        state.newMessage = ''; // 发送后清空输入框
      }
    };

    return { ...toRefs(state), sendMessage };
  }
};
</script>

在这个示例中，我们利用 reactive 创建了一个响应式对象 state，其中包含消息 (messages) 和新消息 (newMessage)。每当发送消息时，我们将新消息添加到 messages 数组中，并且 Vue 3 会自动更新视图。

使用 markRaw 保持对象非响应式

在某些情况下，我们可能希望将某些对象标记为非响应式，避免其更新导致的性能损失或额外的渲染开销。可以借助 markRaw 来实现。

import { markRaw, reactive } from 'vue';

const nonReactiveObject = markRaw({ key: 'value' });

const state = reactive({
  myNonReactiveData: nonReactiveObject
});

这种情况下，myNonReactiveData 对象的更改不会触发响应式更新，这可以保持性能，尤其是处理大型数据时。

使用 set 方法添加新属性

对于想要手动添加新属性的对象，我们虽然可以使用赋值的方式进行添加，但更推荐使用 Vue 3 提供的 set 方法，确保对象是响应式的。

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

const state = reactive({
  user: {
    name: 'Tom',
    age: 25
  }
});

const addProperty = () => {
  set(state.user, 'gender', 'male'); // 添加新属性，并确保其是响应式的
};

上面的代码将 gender 属性添加到 user 对象中，之后如果 gender 被修改，Vue 也将会更新视图。

通过自定义组合式函数实现复杂更新

有时，我们需要创建更复杂的状态更新逻辑，可以使用组合式 API 中的自定义组合式函数。这允许我们将状态管理解耦并更好地组织代码。

import { reactive } from 'vue';

export function useCounter() {
  const state = reactive({
    count: 0
  });

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

  const reset = () => {
    state.count = 0;
  };

  return {
    state,
    increment,
    reset
  };
}

在组件中使用这个组合式函数，以提供可重用的计数器功能：

<template>
  <div>
    <h2>计数器: {{ counter.state.count }}</h2>
    <button @click="counter.increment">增加</button>
    <button @click="counter.reset">重置</button>
  </div>
</template>

<script>
import { useCounter } from './path/to/useCounter';

export default {
  setup() {
    const counter = useCounter();

    return { counter };
  }
};
</script>

结论

在 Vue 3 中，手动触发响应式更新是一种重要的技能。通过在适当的场景下使用 ref、reactive、set 和自定义组合式函数，开发者能够更灵活地控制数据变化并有效地优化应用性能。虽然 Vue 的响应式系统已经非常强大，但手动更新的能力让我们能够应对更复杂的双向数据绑定和更灵活的状态管理需求。

希望本文的介绍和示例能够帮助你更好地理解如何在 Vue 3 中手动触发响应式更新。如果你对 Vue 3 有更多的探索或问题，请在评论区分享你的看法或提问！

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》