响应式对象实例

梗概

• Vue3可以监听到类实例的成员变量，但无法监听到方法中的闭包
• Vue2不能监听实例的成员

详解

ai: 在Vue.js 2.x中，将用户定义的类实例化的对象转成响应式的变量是不支持的。这是因为Vue.js 2.x使用的是基于Object.defineProperty的响应式系统，它无法检测到类实例内部状态的变化。

然而，在Vue.js 3.x中，Vue使用了新的响应式系统 - Vue Observer，基于 ES6 的 Proxy 实现。这使得 Vue.js 3.x 能够将类实例转换为响应式对象。

示例：

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
 
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}
 
const user = Vue.observable(new User('John', 'Doe'));
 
// Now `user` is a reactive object

但是，请注意，在Vue.js 3.x中，你仍然无法监听到类的方法内部的状态变化。如果你需要在类的方法内部改变状态并触发更新，你可能需要使用Vue的ref()或reactive()方法，或者考虑使用Composition API。