ES6中的proxy和vue的响应式原理

1. Proxy的基本理解：

var person={
  age: 13,
  job: "engineer"
}
var proxy=new Proxy(person, {
  get (target, key, receiver) {
   //do sth
  },
  set (target, key, value, receiver) {
  // do sth
  }
});

在上述代码中，我们为person对象创建了一个代理对象proxy, 我认为proxy对象内部存在引用，指向了其内部的target，即person对象。Proxy构造函数大致可以理解成这个形式：
new Proxy(target, handler);

proxy.name (*)
proxy.age=23 (**)

(*)处的语句会调用get函数，(**)会调用set函数, 可以理解为代理对象对操作符进行了重载。

2.get函数的应用：

2.1 数组下标越界处理

function createArr(...elements){
  var arr=[];
  arr.push(...elements);
  var handler={
  get(target, index){
    var index=Number(index);
    if (index < 0 ) return target[target.length+index];
    else return target[index];
    }
  }
  return new Proxy(arr,handler);
}

2.2 实现链式调用

function callbackChain(value){
  var funcArr=[];
  var proxy=new Proxy({}, {
    get(target, property) {
      if (propery == 'get') {
         return funcArr.reduce((val,fn=>fn(val)),value);
      } else {
         funcArr.push(window[property]);
         return proxy;
      }
   });
   return proxy;
}

2.3 一个通用的dom元素创建函数

var dom = new Proxy({},{
  get (target, property) {
    return function(attrs={},...children){
      const el=document.createElement(property);
      for(let attr of Object.keys(attrs){
      el.setAttribute(attr,attrs[attr]);
      }
      for (let child of children){
         if(typeof child == 'string') {
           child=document.createTextNode(child);
         }
         el.appendChild(child);
       }
      return el;
    }
  }
});
//use it
dom.a({href: 'https://www.baidu.com'}, div.span({},'hello'));

3. set函数的应用