不知不觉VUE3.0已经发布了半年多了，各大前端框架也在不断的追寻新版本的脚步迭代更新，虽然目前vue3.0对现有的2.X项目保持着向下兼容，但是如 composition-api、父子孙之间的传参方式等新特性的出现，对我们代码的组织能力，全局状态掌控能力也有着更高的要求，我们“切图仔”也该行动起来了，不能被时代的洪流所淘汰。
一切都从双向绑定开始
回想过去，双向绑定应该是我们jquery开发工程师们刚开始接触时vue 最为惊艳的特性了 。终于不用再js里艰难的拼模板字符串了。众所周知Vue2.x中，响应式数据的实现依赖于js 的 Object.defineProperty Api,我们来看一个最简单的例子。
Object.defineProperty
const obj = {};
//对数据赋值时影响视图
Object.defineProperty(obj, 'text', {
get: function() {
console.log('读取value值');
},
set: function(newVal) {
console.log('设置value值:' + newVal);
document.getElementById('input').value = newVal;
document.getElementById('span').innerHTML = newVal;
}
});
//修改视图控件时影响数据
const input = document.getElementById('input');
input.addEventListener('keyup', function(e){
obj.text = e.target.value;
})
vue会在实例初始化时，对数据进行遍历设置，从而实现了我们的双向绑定功能 。
Object.defineProperty 有以下几个缺点
- 无法原生监听数组的变化，需要特殊处理
- 必须遍历对象的每个属性（初始化的时，Object.definePropety是从data的根节点遍历到末节点）
- 无法监听属性的新增删除操作只能劫持当前对象属性，
- 如果想深度劫持，必须深层遍历嵌套的对象
Proxy
Vue3.0 中，响应式数据部分弃用了 Object.defineProperty（在IE下仍会使用defineProperty做兼容处理），使用Proxy来代替它, Proxy在目标对象之前架设一层“拦截器”，外界对该对象的访问，都必须先通过这层拦截器，可以对外界的访问进行过滤和改写，关于 Proxy 的文献很多，但我们在Vue中真正需要知道的是 Proxy 是一个包含另一个对象或函数并允许你对其进行拦截的对象，相对于2.x的Object.defineProperty 具有以下优点
- 可以直接监听对象而非属性
- 可以直接监听数组的变化
- 性能上的提升
let proxy = new Proxy(target, handler)
target —— 是要包装的对象，可以是任何东西，包括函数。
handler —— 代理配置：带有“钩子”（“traps”，即拦截操作的方法）的对象。比如 get 钩子用于读取 target 属性，set 钩子写入target 属性等等,当handler 为空没有任何钩子时，proxy 是一个 target 的透明包装)
let arr = [1,2]
let arrProxy = new Proxy(
arr,
{
// propKey对于数组来说就是下标，对于对象来说就是键名
get(target, propKey) {
console.log(`读取第 ${propKey}项!`)
},
set(target, propKey, value) {
console.log(`设置第 ${propKey}项!`)
},
}
)
//设置值
arrProxy[0] = 'change' //设置第0项!
//读取值
arrProxy[1] //读取第1项!
注意：2.X 的Vue Devtools工具在vue3.0暂不兼容，需要安装最新版本的，望悉知。
虽然说我们在开发的时候，不会直接接触到双向绑定的原理，但我们总归要知其然，知其所以然，以上这只是Proxy的众多特性中最基础的能力之一，使我们不必重写诸如 push 和 unshift 等添加元素的数组方法（2.X的做法），就可以在其中添加检查，因为在内部它们使用代理所拦截的 [[Set]] 操作，之后还有更多特性和功能，我们会在之后的学习和文章中慢慢体现。
