vue处理json数据的原理_前端面试题(二) 如何完美回答Vue中的数据劫持原理

欢迎来到我的专题文章《前端面试题》系列，更多精彩内容持续更新中，欢迎关注！

上一章节我们说到了面试官最喜欢问的JS的事件循环机制，首先我是给出了官方中肯的回答，然后再结合vue源码进行了修饰。

本章目标

• 彻底搞清楚vue的数据劫持(包括2.x和最新的3.0)

如果说你的技术栈是vue，那么面试中肯定有一个问题绕不过，那就是vue的数据劫持原理。

一般情况下，面试官会这样问：

1. vue中的数据劫持是怎么实现的
2. 说一下vue中的双向数据绑定
3. vue中的数据响应是怎么实现的

方式有很多，本质其实就是问vue中的数据劫持原理。

这个问题的回答在网上也有很多，很详细。

我们可能这样回答：

在vue2.x中，数据响应的原理是通过ES5中的Object.defineProperty来实现的。这个api里面可以处理当数据发生变化时，触发set函数从而渲染视图。

可能再多说一句，vue3.0中的数据响应则是采用的最新的ES6的 Proxy来实现的。

可能到这里，我们就很难组织其它的语言了，如果到这就结束了，面试官一般还会继续追问下去，为什么vue3中要用Proxy来做数据响应。

我们可能回答出Proxy效率更高些。

然后面试官继续问。像挤牙膏一样。。。

不妨听听我的回答

首先我们来思考一下，面试官问我们这个问题，他是想得到一个怎样的回答？难道仅仅是让我们说出那两个用来实现数据响应的api来吗？这些在网上很容易找到答案的。

所以，当面试官提出了问题的时候，我们要有一个全面的思考，不要让面试官追着我们问，我们要占据主动权，先简单回答网上的答案，然后引出我们自己的理解。这样才能征服面试官。

那么，我的回答是这样的，谨供参考

1. 首先在vue2.x中，数据响应是通过Object.defineProperty来实现的，它可以检测到当数据发生变化的时候，触发一个set函数，然后去渲染UI。
2. 但是ES5这个api是存在缺陷的，比如，他不能检测出来数组的变化。但是呢。在vue中，当我们对数组进行push，splice,pop，unshift,shift等操作的时候，确实现了数据响应，这是因为vue的作者基于Object.defineProperty来重写了原生数组的这些方法。具体的源码分析可以参考我前面的文章 从源码中学Vue(六)「解密」为什么操作数组的方法也会触发视图更新
3. 鉴于Object.defineProperty这个api的缺陷，所以在vue3中，作者采用全新的ProxyAPI来作为数据劫持，它可以完美解决Vue2.0中的问题。而且性能很高。
4. 接下来我们可以大概说一下es6 中的Proxy的基本用法，以及Proxy的兼容性的问题。

到这里，回答就比较完美了。

回答的时候记得提前组织好语言，一气呵成，不要给面试官问你问题的机会，我们要占据主动权，让自己在面试过程中更有自信。

总结：

1. 面试过程中，对于面试官的问题不要三两句就给说完了，基本的回答后，一定要延伸出我们自己的理解。
2. 对于每一个功能需求的叠代，api也会升级，两个api肯定是各有优势和不足，我们可以从这两个方面做为切点，从而形成自己的观点。
3. 面试过程中同一个问题，尽量不要让面试官不断的延伸，而是我们自己要根据问题自行展开，占据主动。

希望我的分享能帮助到正在找工作的你们。

这里是【畅哥聊技术】的《前端面试题》专题系列。更多内容持续更新中。

下期我们接着聊，未完待续。。。