使用reactive导致数据失去响应式的原因和解决方案

import { reactive } from 'vue';

const state = reactive({
  user: {
    name: 'John',
    age: 30
  }
});

// 错误示例：直接赋值
state.user = {
  name: 'Jane',
  age: 25
}; // Vue 无法追踪到这个赋值操作，视图不会更新

import { reactive, set } from 'vue';

const state = reactive({
  user: {
    name: 'John',
    age: 30
  }
});

// 正确的做法：使用 Vue 提供的方法更新属性
state.user.name = 'Jane'; // 正确，会触发视图更新
state.user.age = 25; // 正确，会触发视图更新

import { reactive } from 'vue';

const state = reactive({
  user: {
    name: 'John',
    age: 30
  }
});

// 合并更新：保持响应式
Object.assign(state.user, {
  name: 'Jane',
  age: 25
}); // 正确，会触发视图更新

import Vue from 'vue';

const state = Vue.observable({
  user: {
    name: 'John',
    age: 30
  }
});

// Vue 2 的用法
Vue.set(state.user, 'name', 'Jane'); // 正确，会触发视图更新

import { reactive } from 'vue';

const state = reactive({
  user: {
    profile: {
      name: 'John',
      age: 30
    }
  }
});

// 错误示例：直接替换嵌套对象
state.user.profile = {
  name: 'Jane',
  age: 25
}; // Vue 无法追踪到这个赋值操作，视图不会更新

// 正确示例：修改嵌套对象的属性
state.user.profile.name = 'Jane'; // 正确，会触发视图更新
state.user.profile.age = 25; // 正确，会触发视图更新