vue3 分析总结响应式丢失问题原因（二）

原创

已于 2025-02-17 20:05:06 修改 · 1.5k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-02-16 15:46:50 首次发布

上一篇文件理解了响应式对象应用原理了。公式：

响应式对象 = 代理 + 触发器。

真实的对象：指的是就是一个普通的Object对象，类似{a: 1}

代理对象：Vue定义的特殊对象。类似ref、reactive、computed、props等对象。

但是实际使用结果和预期还是不一致。具体现象是数据修改了，但是并没有实现响应式更新界面。即出现了响应式丢失现象。

一、什么情况下对象的响应式会丢失？

一般网络上查资料，都是告诉我们常见的某些操作（如解构、替换）中容易丢失响应性。只是笼统的说一下容易丢失，具体为什么丢失，会举例哪些情况会丢失，说一堆，感觉把所有情况都告诉你了，又感觉好像还缺点什么。我总结了一下，好像就是缺了一点抽象概况的总结。

所以我先说结论：造成响应式丢失的原因就是没有正确的获取到代理对象。

首先比较简单一点，就是替换操作。例子：

let state = reactive({ count: 0 });
state = { count: 1 }; // 新对象没有响应性

进行替换操作时，可能新的值是一个实际的对象，而不是响应式对象，导致变量引用对象发送了改变，实际结果就是state响应性丢失了。这种情况比较好理解的，注意一点就好了。

比如容易出问题的地方是解构操作。后端程序员可能对于解构概念不是很清晰，理解其语法糖本质后，后面就好理解了。

解构是一种从数组或对象中提取值的语法。它允许你将数组或对象的属性直接赋值给变量。

const arr = [1, 2, 3];
const [a, b, c] = arr; // 解构数组
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

const arr = [1, 2, 3];
const a = arr[0]; 
const b = arr[1]; 
const c = arr[2]; 
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

const obj = { name: "Alice", age: 25 };
const { name, age } = obj; // 解构对象
console.log(name); // "Alice"
console.log(age); // 25

const obj = { name: "Alice", age: 25 };
const name = obj.name; 
const age = obj.name; 
console.log(name); // "Alice"
console.log(age); // 25

阶段总结，解构就是一个语法糖，和普通js赋值操作没什么区别。

这个要分为两种情况：

第一种，如果解构的属性值是原始值类型，那么返回的值就是一个真实对象，而不是代理对象，即返回的值丢失了响应性。

在 JavaScript 中，原始值（Primitive Values） 是最基本的数据类型，它们不是对象，也没有方法或属性。JavaScript 有以下 7 种原始值数据类型：

number（数字）、string（字符串）、boolean（布尔值）、undefined（未定义）、