这个时候不应该是ES6的proxy特性上场了，proxy是ES6的新增的功能，可以用来定义对象中的操作。
let p = new Proxy(target, handler); // `target` 代表需要添加代理的对象 // `handler` 用来自定义对象中的操作如果上面代码格式出现问题，可以查看下面代码图片
可以很方便的使用 Proxy 来实现一个数据绑定和监听.
let onWatch = (obj, setBind, getLogger) => { let handler = { get(target, property, receiver) { getLogger(target, property) return Reflect.get(target, property, receiver); }, set(target, property, value, receiver) { setBind(value); return Reflect.set(target, property, value); } }; return new Proxy(obj, handler); }; let obj = { saucxs: 1 } let value let p = onWatch(obj, (v) => { value = v }, (target, property) => { console.log(`Get '${property}' = ${target[property]}`); }) p.saucxs = songEagle // bind `value` to `songEagle` p.saucxs // -> Get 'saucxs' = songEagle如果上面代码格式出现问题，可以查看下面代码图片
然后在对比vue2和vue3的区别是什么？
以及为啥在数据监听上做了升级？
vue为什么对数组对象的深层监听无法实现，因为组件每次渲染都是将data里的数据通过defineProperty进行响应式或者双向绑定上，之前没有后加的属性是不会被绑定上，也就不会触发更新渲染。
区别：
1、语法层面上
defineProperty只能响应首次渲染时候的属性，
Proxy需要的是整体监听，不需要关心里面有什么属性，而且Proxy的配置项有13种，可以做更细致的事情，这是之前的defineProperty无法达到的。
2、兼容层面上
vue2.x之所以只能兼容到IE8就是因为defineProperty无法兼容IE8,其他浏览器也会存在轻微兼容问题。
proxy的话除了IE，其他浏览器都兼容，这次vue3还是使用了它，说明vue3直接放弃了IE的兼容考虑。
各种福利
文章首发在「松宝写代码。「松宝写代码」：开发知识体系构建，技术分享，项目实战，实验室，每日一题，带你一起学习新技术，总结学习过程，让你进阶到高级资深工程师，学习项目管理，思考职业发展，生活感悟，充实中成长起来。问题或建议，请公众号留言。
1、字节内推福利回复「校招」获取内推码
回复「社招」获取内推
回复「实习生」获取内推
后续会有更多福利
2、学习资料福利回复「算法」获取算法学习资料
3、每日一题
本文是「每日一题」第 5 题：「每日一题」到底该如何回答：vue数据绑定的实现原理？
第 4 道「每日一题」与面试官手撕代码：如何科学高效的寻找重复元素？
第 3 道「「每日一题」面试官问你对 Promise 的理解？可能是需要你能手动实现各个特性」
第 2 道「[每日一题]ES6 中为什么要使用 Symbol？」
第 1 道「一道面试题是如何引发深层次的灵魂拷问？」