【vue3|第6期】如何正确地更新和替换响应式对象reactive

日期：2024年6月5日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

一、前言

在 Vue3 中，响应式系统是通过 reactive 函数创建的，它返回一个响应式代理对象。这个代理对象封装了原始对象，并提供了拦截器来处理对原始对象的访问和修改。然而，当涉及到更新或替换响应式对象时，开发者需要特别注意，因为不当的操作可能会导致响应式丢失。

二、重新分配响应式对象

在 Vue3 中，如果你创建了一个响应式对象，然后尝试重新分配一个新的对象给同一个引用，那么这个新的对象将不会是响应式的。例如：

<script setup>
import { reactive } from 'vue';

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

// 假设我们想要更新 state 对象
state = { count: 1 }; // 这样做会失去响应式

</script>

<template>
  <div>
    <!-- 使用 state.count -->
    Count: {{ state.count }}

    <!-- 或者使用 countRef -->
    <button @click="updateCount">Update Count</button>
  </div>
</template>

在上面的代码中，我们尝试通过重新赋值来更新 state 对象。然而，这样做会导致 state 失去响应式，因为新的对象没有通过 reactive 函数包装。

三、使用 Object.assign 替换对象

为了在 Vue3 中正确地更新响应式对象，你应该使用 Object.assign 或展开运算符（...）来合并或替换对象的属性。这样可以保持响应式状态，因为 reactive 函数返回的代理对象会跟踪其属性的变化。

<script setup>
import { reactive } from 'vue';

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

// 使用 Object.assign 来更新 state 对象
state = Object.assign({}, state, { count: 1 });

// 或者使用展开运算符
state = { ...state, count: 1 };


</script>

<template>
  <div>
    <!-- 使用 state.count -->
    Count: {{ state.count }}

    <!-- 或者使用 countRef -->
    <button @click="updateCount">Update Count</button>
  </div>
</template>

在上面的代码中，我们使用 Object.assign 来创建一个新的对象，它包含了原始 state 对象的所有属性，并且更新了 count 属性。这样，state 仍然是响应式的，因为 reactive 函数返回的代理对象会跟踪到这些属性的变化。

四、总结

在 Vue3 中，更新响应式对象时，开发者应该避免直接重新赋值。相反，应该使用 Object.assign 或展开运算符来合并或替换对象的属性。这样可以确保响应式系统能够正确地跟踪数据的变化，并在视图中进行相应的更新。

希望本文能帮助你更好地理解 Vue3 中响应式对象的更新和替换。如果你有任何问题或想要进一步探讨 Vue3 的其他特性，请随时留言。我们期待你的反馈和建议，以便不断改进我们的内容。

参考文章：

• Vue.js

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139440744