课前知识

那学习vue3的数据劫持前，我们得先学习几个es6的API，这里只是概括，具体请参考阮老师的教程。

Proxy

译为代理，比如你想查火车票，所以你打开携程，开始查票。但实际上，携程是通过12306查的。

那么用代码怎么来实现呢？

var 中国铁路12306 = {
  高铁票: "K1234",
}
var 携程 = new Proxy(中国铁路12306, {
  get(target, key, receiver) {
    return target[key] + "_"
  },
})

// 携程.高铁票
// > "K1234_"
// 中国铁路12306.高铁票
// > "K1234"

并且它能代理的方法有13种，包括：

get、set、has、deleteProperty...

数据劫持

回忆一下我们之前提到的vue2.x是如何实现数据劫持的？

答：通过Object.defineProperty设置对象的每个属性的get和set！

var data = {
  a: 1,
}

var _a = undefined
Object.defineProperty(data, "a", {
  get() {
    return _a
  },
  set(val) {
    _a = val
  },
})

在这种方法下，我们需要对每一个属性都调用一次Object.defineProperty，并把实际的值通过闭包存储起来！这样做一点都不优雅，我们只是希望在获取/设置值的时候去做点其他的事情，并不是想做空掉原对象。

而使用Proxy则不需要这样，Proxy就是为类似的使用场景而生的！我们只需要简单的：

var data = {
  a: 1,
}

var _data = new Proxy(data, {
  get(target, key) {
    return target[key]
  },
  set(target, key, value) {
    return (target[key] = value)
  },
})

没有多余的变量，我们只需在它的get/set中去做我们想做的事就好了，轻松的实现数据劫持。