Object.defineProperty 的缺点

  • 深度监听需要一次性递归
  • 无法监听新增属性、删除属性
  • 无法原生监听数组，需要特殊处理

    Proxy 实现响应式

    基本使用

    ```javascript const data = { name: ‘zwx’, age: 26 }

const data2 = [1,2,3,4]

const proxyDate = new Proxy(data2, { get(target, key, receiver){ // 只处理本身的属性 /* Reflect.ownKeys([10, 20, 30]); [ ‘0’, ‘1’, ‘2’, ‘length’ ]

  1.     Reflect.ownKeys({a: 10, b: 20});
  2.   [ 'a', 'b' ]
  3. */
  4. const ownKeys = Reflect.ownKeys(target);
  5. if ( ownKeys.includes(key) ) {
  6.   console.log('触发视图变化')
  7. }
  9. const res = Reflect.get(target, key, receiver);
  10. return res;

}, set(target, key, val, receiver){ // 不重复修改数据 if (val === target[key]) return true;

const res = Reflect.set(target, key, val, receiver);
console.log('set', key, val);
return res;

}, deleteProperty(target, key){ const res = Reflect.deleteProperty(target, key); console.log(‘delete’, key, res); return res; } });

proxyDate.push(5)

<a name="X1WZv"></a>
## Reflect 作用

- 和 Proxy 能力一一对应
- 规范化、标准化、函数式
```javascript
const obj = {a: 1, b: 2};

'a' in obj
Reflect.has(obj, 'a') // 更好

delete obj.a
Reflect.deleteProperty(obj, 'a') // 更好

Object.getOwnPropertyNams(obj)
Reflect.ownKeys(onj) // 更好
  • 替代掉 Object 上的工具函数