vue3 响应式对象如何实现方法的不同点

Vue3 响应式对象中实现方法的不同点主要是基于 Proxy 相比于 Object.defineProperty 的优势来实现的。具体来说，以下是两者之间的主要区别：

1. 对象的属性设置

在 Vue3 中，我们使用了 Proxy 代理来处理对象的属性设置。与 Object.defineProperty 不同，Proxy 可以代理整个对象，而不仅仅是对象的某个属性。通过设置一个代理对象，在设置属性或调用函数时，代理对象会拦截属性的读写操作，并触发相应的响应式更新。这意味着我们可以在对象的所有属性上应用相同的拦截器，使整个对象响应式更新。

以下是一个简单的示例，我们创建了一个基础的 Vue3 响应式对象，并为其添加了一个新的属性 "age" 和一个属性更新方法 "updateAge"：

import { reactive } from 'vue';

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

// 添加属性
state.age = 26;

// 更新方法
function updateAge() {
  state.age++;
}

console.log(state.age); // 26
updateAge();
console.log(state.age); // 27

1. 响应式对象的监听

在 Vue3 中，我们也使用了 Proxy 来实现响应式对象的监听。与 Object.defineProperty 不同，当我们删除或添加新的属性时，Proxy 可以正确地触发代理对象上的响应式更新。

以下是一个示例，我们创建了一个 Vue3 响应式对象，并为其添加了一个新的属性和一个删除方法：

import { reactive, watch } from 'vue';

const state = reactive({
  name: 'Bob'
});

// 添加属性
state.age = 30;

// 删除属性
function deleteAge() {
  delete state.age;
}

// 监听对象的变化
watch(() => state, (value) => {
  console.log('state changed:', value);
});

console.log(state); // {name: "Bob", age: 30}
deleteAge();
console.log(state); // {name: "Bob"}

总结来说，Vue3 响应式对象中实现方法的不同点有两方面：一是在对象的属性设置上使用了 Proxy 代理对象，而不是 Object.defineProperty；二是对响应式对象的监听实现了更有效的处理方式，使得整个对象都能够响应式更新。