数据代理方法

这是我参与8月更文挑战的第12天，活动详情查看： 8月更文挑战”juejin.cn/post/698796…

基于普通对象的get和set

const obj = {
  _name:"",
  get name(){
    return this._name;
  }
  set name(val){
    this._name = val;
  }
}
obj.name;   // 触发get方法
obj.name='skyrain';  // 触发set方法

基于Class的get和set

class Obj{
  constructor(){
    this._name = '';
  }
  get name(){
    return this._name;
  }
  set name(val){
    this._name = val;
  }
}
const obj = new Obj();
obj.name;
obj.name='skyrain';

基于Object.defineProperty的get和set

const obj = {
  _name:''
};
Object.defineProperty(obj,'name',{
  get(){
    return this._name;
  }
  set(val){
    this._name= val;
  }
})
obj.name;
obj.name='skyrain'

Vue2中采用该方式代理除数组之外的数据

基于Proxy的get和set

const obj = {
  _name:''
};
const proxy = new Proxy(obj,{
  get(target,name){
    return target[name]
  }
  set(target,name,val){
    target[name] = val;
  }
})

Vue3中使用proxy来代理数据

基于__defineGetter和__defineSetter

const obj= {
  _name: ''
};

obj.__defineGetter__('name', function() {
  return this._name;
});

obj.__defineSetter__('name', function(val) {
  this._name = val;
});

该方式与其他四种方式的区别是：

• 该方式可以动态设置属性，而其他方式只能在定义时设置。