Vue2.x 与Vue3.x 双向数据绑定区别
栏目: JavaScript · 发布时间: 6年前
内容简介：看过Vue2.x的源码都知道，其双向数据绑定原理是通过es5的Object.defineProperty，中的set方法来实现数据劫持的，但是有一个弊端就是无法兼听到数组内部的数据变化(当然我们可以通过arr = arr.concat([]))，来实现内部数据变化的检测。相比Vue3有一定的性能问题。Vue3.x是用ES6的语法 Proxy（Proxy 怎么用大家可自行百度，网上教程大把，我就不在这赘述了）对象来实现的，这个玩意儿也可以实现数据的劫持，相比Object.defineProperty的优势是：
看过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的话，那请问你的竞争力在哪？
最后希望我的分享能够帮助到大家。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
大规模Web服务开发技术
伊藤直也、田中慎司 / 李剑 / 电子工业出版社 / 2011-7 / 59.00元
Hatena是日本最大的Web服务提供商之一，它提供的服务包括关键字（类似于维基百科）、博客、相册等。《大规模Web服务开发技术》由伊藤直也、田中慎司所著，内容主要来自Hatena为学生们举行的暑期实习的课程，内容涵盖广泛，介绍了性能优化、分布式、算法、系统架构等各个方面，甚至还介绍了硬件的经济成本，是运维工程师们必不可少的参考书。书中还包括几个算法实习课题，介绍了压缩算法、全文搜索等算法的实现方......一起来看看 《大规模Web服务开发技术》 这本书的介绍吧!
