reactive

• 内部用 es6 Proxy 代理 API 实现了数据响应式

前置知识

• Proxy
  • 是个构造函数
  • 可以拦截对象
• Reflect
  • 不是个构造函数，是个内置对象
    • Reflect = { get, set, ... }
    • 静态方法与 Proxy 的 handler 中的属性一一对应
      • 也就是说 Proxy 的 handler 中有个 set ，那 Reflect 就有一个 set 静态方法
• 类似 Object.getPropertyOf 以后都会转移到 Reflect 上去
  • 为什么
    • 因为 getPropertyOf 这些方法其实都是 JavaScript 内置方法，不应该放到 Object 这样一个类型上边，而应该放进类似 Math 这样的对象上统一管理，后边就决定用 Reflect 去管理了

webpack 配置

入口文件

reactive.js

• 返回一个响应式数据（new Proxy）

递归操作

• Proxy 只能代理对象下边的第一层数据

• 深层数据代理还得递归

  

• 可以在 setter 中判断此次更新时新增还是修改，以便走不同的逻辑