Vue 3 中响应式赋值的正确姿势：解除赋值替换的困惑

2023-11-26 20:47:50

在 Vue 3 开发过程中，遇到页面数据未更新的问题时，开发者通常会疑惑为何直接修改对象属性或整个对象未能触发视图更新。这背后的原因在于 Vue 3 的响应式系统设计及其对原始数据和新创建的数据之间的区分。

直接赋值与响应式的冲突

在使用 reactive 创建的响应式对象时，如果直接将一个全新的对象覆盖现有对象，Vue 依赖于追踪到的变化来更新视图。当开发者尝试替换整个对象而不是修改其内部属性时，Vue 并不能识别这种变化，因为这被视为一个新的内存地址。

错误示例:

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

// 直接赋值新对象
state.user = { name: '李四', age: 30 }; // 视图不会更新

使用 `.value` 赋值

对于使用 ref 创建的响应式数据，直接修改 .value 属性可以触发响应系统。这种方式适用于单个简单类型的包装。

正确示例:

const count = ref(0);

// 正确赋值方式
count.value += 1; // 视图会更新

使用 `Object.assign()` 浅拷贝

另一种方法是利用 Object.assign() 来浅拷贝新的对象到现有的响应式对象，而不是直接替换。这种方式能够保留原有的响应性，同时引入新数据。

正确示例:

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

// 使用 Object.assign 浅拷贝新的属性到现有对象中
Object.assign(state.user, { name: '李四', age: 30 }); // 视图会更新

利用 `Vue.set()` 方法

Vue.set() 方法可用于在 Vue 实例上设置一个响应式数据。这种方法适用于需要添加或修改深层嵌套属性的情况。

正确示例:

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

// 使用 Vue.set 设置深层嵌套属性
Vue.set(state.user.address, 'city', '北京'); // 视图会更新