Vue2x-与Vue3x-双向数据绑定区别

看过 Vue2.x 的源码都知道，其双向数据绑定原理是通过 es5 的 Object.defineProperty，中的 set 方法来实现数据劫持的，但是有一个弊端就是无法兼听到数组内部的数据变化 (当然我们可以通过 arr = arr.concat([]))，来实现内部数据变化的检测。相比 Vue3 有一定的性能问题。

Vue3.x 是用 ES6 的语法 Proxy（Proxy 怎么用大家可自行百度，网上教程大把，我就不在这赘述了）对象来实现的，这个玩意儿也可以实现数据的劫持，相比 Object.defineProperty 的优势是：可以检测到数组内部数据的变化, 如下图：

![图片上传中 …]

据说 proxy 要比 Object.defineProperty 的内存减半,vue3.x 还没正式发布，我也只是听说，听说哈，减不减半我不知道也不敢下结论。

你以为这就完了吗？哈哈哈哈，你没猜错，IE 系列都不兼容 Proxy，哈哈哈哈哈。

But

社会是要向前进的，这点相信尤大大已经为我们考虑到了，肯定会有向下兼容的方案，那就是用原始的 Object.defineProperty 咯。

写在最后：大家不管学什么框架，一定要尝试去读下别人的源码，不要一上来就 vue-cli 就咔咔咔开撸。如果每个前端都会 vue-cli 的话，那请问你的竞争力在哪？

最后希望我的分享能够帮助到大家。