关于 Vue 3.0，前端开发者必须知道的不仅仅是Proxy...

前端技术在最近十年的时间里飞速发展，一方面是移动互联网的兴起，带动移动端浏览器用户需求的飞速增加，另一方面是 Angular、React、Vue 等框架和 Node.js，ES6等新技术的出现和发展，带动了前端技术的飞速提升。

前端早已经不是之前人们口中的 “抠图仔”、只是写写简单的 HTML，CSS 和脚本动画。如今的前端早已经系统化，工程化，前后端分离的开发模式带动前端工程师在开发者中的地位一再提升，因为前后端仅凭接口数据交互，前端工程师可以对接任意语言的后端工程师，也正因此，前端工程师的薪资不论是起薪还是涨幅都是一再水涨船高。

高薪资就意味着对高能力的要求，要想在面试中获得超高薪资的 offer，一定要有雄厚的实力，在平时一定要多学习专业知识，积累专业技能，关注行业最新动态。

（文末扫码获取能力图谱）

说到行业动态，在去年九月底，Vue 的作者尤雨溪公布了 Vue3.0 版本的开发计划。一石激起千层浪，消息一出，顿时前端开发者中爆发出一片“学不动了”的哀嚎。

然而，大神是不会因为普通开发者的哀嚎而停下他们创世纪的运动的。作为普通开发者，我们只能不断学习、接受新的知识。

在开发计划中，下图这段话十分吸引我的注意力。Vue3.0 版本中将基于 Proxy 来改造观察者模式。这意味 Vue3.0 中不再借助于 ES5 的 Object.defineProperty，转而使用最新的 Proxy 语法实现 Vue 最根本的数据响应式系统。

如何用 Proxy 来实现对 Object.defineProperty 的替代？因为 Vue3.0 尚未发布，我来讲讲一个简单实现。

什么是Proxy？

Proxy 对象是在 ES6 中加入的用来自定义对象的各种内建操作，改写 JavaScript 引擎行为的默认操作的包装器。在使用 Proxy 定义了对于某些行为的拦截器后，执行相应的操作时，Proxy 会拦截 JavaScript 引擎内部对于相应行为的底层操作并执行自定义的相应行为的陷阱函数。

在陷阱函数运行时，引擎的默认操作终止。在陷阱函数中，我们可以执行Reflect对象中与行为相对应的方法来继续执行引擎默认操作，这样一套机制保证了在拦截引擎默认行为时，执行完成自定义行为后，随时可以结束拦截，继续按照引擎默认行为去执行----当然，也可以没有后续操作。

Object.defineProperty

如何实现响应式特性

Object.defineProperty 是 ES5 中的属性，传入一个描述对象即可描述一个对象的属性的特性。

我们用 Object.defineProperty 来实现对象读写时执行一些特定操作（比如发布属性更新的消息）。

在这个例子中，data 作为一个消息发布者，在将 data 所有属性利用 Object.defineProperty 定义了他们的 getter、setter 后，每次更改 data 属性时，都将执行 setter 中定义的发布通知给 watcher 的逻辑。

Proxy如何实现响应式特性

Proxy 中存在两个陷阱，一个是 get 陷阱，另一个是 set 陷阱。顾名思义，get 陷阱拦截读取属性的默认操作，set 陷阱拦截设置属性时的默认操作。另一方面，Reflect 同样具有对应行为的方法执行默认操作。

同样是对于 data 对象操作：

创建一下它的代理对象：

data 对象的代理中声明了两个陷阱，分别定义了读取和设置对象属性的行为，我们来尝试运行几句代码：

可以看到，proxy 可以很顺利地执行自定义的代码，在读取和设置属性时，都执行了自定义的代码，也没有耽误默认行为的执行。

Vue3.0 的发布尚需时日，本文是笔者对于 Vue 应用 Proxy 实现响应式的方法的猜想。最终具体的实现并不重要，我们只要学好 ES6 知识和现版本 Vue 的应用和原理，相信即使更新了版本也能够很快掌握。Vue 和 ES6 也是目前面试时的重头戏，能够对于有关 Vue 原理和 ES6 语法的问题对答如流的同学拿到的 offer 都是令人称羡的。

虽然语言的语法和框架功能的具体实现会实时变化，他们背后蕴含的思想是一致的，只要我们掌握了 Vue 底层的设计思想，相信同学们都会达到游刃有余的地步。

可能用 Vue 写业务代码写了很久，api 也调用得很顺手，但是问及原理就说不清个所以然来，这也是很多同学在面试中遇到的问题。那么如何在面试中对于 Vue 框架的问题逐个击破，向面试官对答如流呢？

技术人成长不能再单打独斗，要学会与人交流，学会将别人的知识为自己所用。如果你依然觉得有些茫然，不如跟有多年前端开发经验的资深工程师聊一聊。