vue2和3的属性拦截解决方案

Vue 2和Vue 3的属性拦截解决方案有所不同。

在Vue 2中，可以使用Object.defineProperty来拦截属性。例如，以下代码拦截了一个data对象的name属性：

var data = { name: 'John' };
Object.defineProperty(data, 'name', {
  get: function() {
    console.log('Getting name');
    return this._name;
  },
  set: function(value) {
    console.log('Setting name to ' + value);
    this._name = value;
  }
});

console.log(data.name); // 'Getting name' 'John'
data.name = 'Jane'; // 'Setting name to Jane'
console.log(data.name); // 'Getting name' 'Jane'

在Vue 3中，可以使用Proxy对象来拦截属性。例如，以下代码拦截了一个data对象的name属性：

var data = { name: 'John' };
var handler = {
  get: function(target, prop, receiver) {
    console.log('Getting ' + prop);
    return Reflect.get(target, prop, receiver);
  },
  set: function(target, prop, value, receiver) {
    console.log('Setting ' + prop + ' to ' + value);
    return Reflect.set(target, prop, value, receiver);
  }
};
var proxy = new Proxy(data, handler);

console.log(proxy.name); // 'Getting name' 'John'
proxy.name = 'Jane'; // 'Setting name to Jane'
console.log(proxy.name); // 'Getting name' 'Jane'

需要注意的是，Vue 3中的Proxy对象具有更好的性能和更简洁的语法，但它并不支持IE11及以下版本的浏览器。因此，在实际开发中需要选择合适的方案。