proxy-pro

2019-01-05

2019年的第一篇文章

1.故事起因,且看以下代码

  <li v-for="(item,index) in items" :key="index">
         {{item}}
  let data = {
    items:['wwww', 'eeee', 'ffff']
  }
  const mounted = () => {
     setTimeout(() => {
        this.items[0] = 'llll'
     }, 3000)
}

看了上面的代码很多都说5秒钟列表渲染有变化, 其实不然。。。3s后dom无变化。

在Vue中，Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。

2.来瞧一下proxy的用法

let obj = {};
 let handler = {
   get(target, property) {
    console.log(`${property} 被读取`);
    return property in target ? target[property] : 3;
   },
   set(target, property, value) {
    console.log(`${property} 被设置为 ${value}`);
    target[property] = value;
   }
 }
 
 let p = new Proxy(obj, handler);
 p.name = 'tom' //name 被设置为 tom
 p.age; //age 被读取 3

可以看到proxy其实和defineProperty很相似, 如果将上述的obj.name = ‘kkkkk’,那么p会怎样。。。

3.基本运用trap1 之set

function createValidator(target, validator) { 
    return new Proxy(target, { 
        _validator: validator, 
        set(target, key, value, proxy) { 
            if (target.hasOwnProperty(key)) { 
                let validator = this._validator[key]; 
                if (!!validator(value)) { 
                    return Reflect.set(target, key, value, proxy); 
                } else { 
                    throw Error(`Cannot set ${key} to ${value}. Invalid.`); 
                } 
            } else { 
                throw Error(`${key} is not a valid property`) } } }); }
// 注意用法 this._validator[key]; handler里面可以添加属性到代理对象
const personValidators = { 
    name(val) { 
        return typeof val === 'string'; 
        }, 
    age(val) { 
        return typeof age === 'number' && age > 18; }
    } 
    
    class Person { 
        constructor(name, age) { 
            this.name = name; 
            this.age = age; 
            return createValidator(this, personValidators); 
        } 
    } const bill = new Person('Bill', 25); 
    // 以下操作都会报错 bill.name = 0; bill.age = 'Bill';

3.基本运用trap2 之has

var api = { 
    _apiKey: '123abc456def', 
    getUsers: function(){ }, 
    getUser: function(userId){ }, 
    setUser: function(userId, config){ } }; 
const RESTRICTED = ['_apiKey']; 
api = new Proxy(api, 
    { has(target, key) { 
          return (RESTRICTED.indexOf(key) > -1) ? false : Reflect.has(target, key); 
    } 
}); // these log false, and `for in` iterators will ignore _apiKey 
// these log false, and `for in` iterators will ignore _apiKey 
console.log("_apiKey" in api);

4.基本运用trap3 之set 修改行为

let api = { 
    _apiKey: '123abc456def', 
    getUsers: function() { /* ... */ }, 
    getUser: function(userId) { /* ... */ }, 
    setUser: function(userId, config) { /* ... */ } 
    }; 
function logMethodAsync(timestamp, method) { 
    setTimeout(function() { 
        console.log(`${timestamp} - Logging ${method} request asynchronously.`); 
        }, 0) 
} 
    
api = new Proxy(api, { 
    get: function(target, key, proxy) { 
        var value = target[key]; 
        return function(...arguments) { 
            logMethodAsync(new Date(), key); 
            return Reflect.apply(value, target, arguments); 
        }; 
    } }); 
api.getUsers();

注意这个api.getUsers最后被修改为了一个function, 相当于一个装饰器作用。

5.最后再来看一个例子

function sum(a, b) {
  return a + b;
}
const handler = {
  apply: function(target, thisArg, argumentsList) {
    console.log(`Calculate sum: ${argumentsList}`);
    // expected output: "Calculate sum: 1,2"
    return target(argumentsList[0], argumentsList[1]) * 10;
  }
};
var proxy1 = new Proxy(sum, handler);
console.log(sum(1, 2)); 
// expected output: 3
console.log(proxy1(1, 2));
// expected output: 30

用到了apply, 注意如果被代理的对象如果不是函数, 那么返回的proxy实例没有apply属性。