[游戏开发]学习 vue3.0实现原理之proxy

存在的问题

在Vue2.0中，数据双向绑定就是通过Object.defineProperty去监听对象的每一个属性，然后在get,set方法中通过发布订阅者模式来实现的数据响应，但是存在一定的缺陷，比如只能监听已存在的属性，对于新增删除属性就无能为力了，同时无法监听数组的变化，所以在Vue3.0中将其换成了功能更强大的Proxy。

请分别使用Object.defineProperty和Proxy完善下面的代码逻辑

function observe(obj, callback) {}

const obj = observe(
  {
    name: '小鱼',
    sex: '女'
  },
  (key, value) => {
    console.log(`属性[${key}]的值被修改为[${value}]`)
  }
)

// 这段代码执行后，输出 属性[name]的值被修改为[妹纸]
obj.name = '小鱿鱼'

// 这段代码执行后，输出 属性[sex]的值被修改为[女]
obj.sex = '未知'

1. 用Object.defineProperty实现

/**
 * 请实现这个函数，使下面的代码逻辑正常运行
 * @param {*} obj 对象
 * @param {*} callback 回调函数
 */
function observe(obj, callback) {
  const newObj = {}
  Object.keys(obj).forEach(key => {
    Object.defineProperty(newObj, key, {
      configurable: true,
      enumerable: true,
      get() {
        return obj[key]
      },
      // 当属性的值被修改时，会调用set，这时候就可以在set里面调用回调函数
      set(newVal) {
        obj[key] = newVal
        callback(key, newVal)
      }
    })
  })
  return newObj
}

const obj = observe(
  {
    name: '小鱼',
    sex: '女'
  },
  (key, value) => {
    console.log(`属性[${key}]的值被修改为[${value}]`)
  }
)

// 这段代码执行后，输出 属性[name]的值被修改为[妹纸]
obj.name = '小鱿鱼'

// 这段代码执行后，输出 属性[sex]的值被修改为[女]
obj.sex = '未知'

2. 用Proxy

function observe(obj, callback) {
  return new Proxy(obj, {
    get(target, key) {
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      callback(key, value)
    }
  })
}

const obj = observe(
  {
    name: '小鱼',
    sex: '女'
  },
  (key, value) => {
    console.log(`属性[${key}]的值被修改为[${value}]`)
  }
)

// 这段代码执行后，输出 属性[name]的值被修改为[妹纸]
obj.name = '小鱿鱼'

// 这段代码执行后，输出 属性[sex]的值被修改为[女]
obj.sex = '未知'

从上面可以大概的了解到Object.defineProperty和Proxy的用法,但是当给对象添加新的属性的时候，区别就出来了

// 添加公众号字段
obj.gzh = '前端有的玩'

使用Object.defineProperty无法监听到新增属性，但是使用Proxy是可以监听到的。

proxy

proxy 的意思是 代理，用来代理某些操作。

在访问目标对象之前架设一层拦截机制，外界访问这个对象，都必须通过这个拦截。 因此可以通过这一层拦截机制对这个对象进行过滤和改写。

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

target: 为所要代理的目标对象（target 为一个对象）
handler：对代理对象的拦截时进行的操作（handler 中包含方法）

如果handler没有设置任何拦截，那就等同于直接通向原对象。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

handler 里面的方法有十三个，具体可以参考https://es6.ruanyifeng.com/#docs/proxy