文章首发于个人博客
目录
- Proxy
- Vue 2.0 使用
Object.defineProperty()实现数据响应 - Vue 3.0 中的
Proxy - Proxy的其他应用
Proxy
什么是代理呢，可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，都必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。
ES6 原生提供 Proxy 构造函数，MDN上的解释为：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
我们先来看看怎么使用。
代码语言：txt复制const p = new Proxy(target, handler);target： 所要拦截的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）handler：一个对象，定义要拦截的行为
const p = new Proxy({}, {
get(target, propKey) {
return '哈哈，你被我拦截了';
}
});
console.log(p.name);
// 哈哈，你被我拦截了注意Proxy是用来操作对象的。代理的目的是为了拓展对象的能力。
再看一个例子
我们可以实现一个功能：不允许外部修改对象的name属性。
代码语言：txt复制const p = new Proxy({}, {
set(target, propKey, value) {
if (propKey === 'name') {
throw new TypeError('name属性不允许修改');
}
// 不是 name 属性，直接保存
target[propKey] = value;
}
});
p.name = 'proxy';
// TypeError: name属性不允许修改
p.a = 111;
console.log(p.a); // 111babel是用来转换语法的，像新增的API（比如Array.from， Array.prototype.includes ）我们需要安装额外的包来进行支持，比如 core-js/stable 和 regenerator-runtime/runtime （PS：babel 7.x 之后@babel/polyfill已不推荐使用），然后还有一些API（String#normalize、Proxy、fetch等）
core-js中是暂时没有提供 polyfill，具体的可查看官方文档 core-js#missing-polyfills。
Proxy支持的拦截操作一共 13 种，详细的可以查看 MDN。
vue2.x 是怎么实现数据的响应的呢?
递归遍历data中的数据，使用 Object.defineProperty()劫持 getter和setter，在getter中做数据依赖收集处理，在setter中 监听数据的变化，并通知订阅当前数据的地方。
部分源码 src/core/observer/index.js#L156-L193, 版本为 2.6.11 如下
代码语言：txt复制let childOb = !shallow && observe(val)
// 对 data中的数据进行深度遍历，给对象的每个属性添加响应式
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
// 进行依赖收集
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
// 是数组则需要对每一个成员都进行依赖收集，如果数组的成员还是数组，则递归。
dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// 新的值需要重新进行observe，保证数据响应式
childOb = !shallow && observe(newVal)
// 将数据变化通知所有的观察者
dep.notify()
}
})这么做有什么问题呢？
- 检测不到对象属性的添加和删除：当你在对象上新加了一个属性
newProperty，当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的)。vue.$set是能让vue知道你添加了属性, 它会给你做处理，$set内部也是通过调用Object.defineProperty()去处理的 - 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
- 当data中数据比较多且层级很深的时候，会有性能问题，因为要遍历data中所有的数据并给其设置成响应式的。
以数组为例说明：
代码语言：txt复制<ul id="example">
<li v-for="item in items">
{{ item }}
</li>
</ul>
const vm = new Vue({
el: '#example',
data: {
items: ['a', 'b', 'c']
},
})
// 直接使用下标修改数据不是实时响应
setTimeout(() => {
vm.items[1] = 'x';
vm.items[3] = 'd';
console.log(vm.items);
}, 500);
// 使用 $set 修改数据是实时响应
setTimeout(() => {
vm.$set(vm.items, 1, 'x')
vm.$set(vm.items, 3, 'd')
console.log(vm.items);
}, 500);vue3.0 使用了Proxy
vue3.0还未正式发布，不过vue-next 的相关代码已经开源出来了，目前处于Alpha版本。
为什么使用 Proxy 可以解决上面的问题呢？主要是因为Proxy是拦截对象，对对象进行一个"拦截"，外界对该对象的访问，都必须先通过这层拦截。无论访问对象的什么属性，之前定义的还是新增的，它都会走到拦截中，
