Vue2.x 与Vue3.x 双向数据绑定区别

phpmatt 发布于2019-08-23 17:19 / 3445人阅读

摘要：看过的源码都知道，其双向数据绑定原理是通过的，中的方法来实现数据劫持的，但是有一个弊端就是无法兼听到数组内部的数据变化当然我们可以通过，来实现内部数据变化的检测。相比有一定的性能问题。

看过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的话，那请问你的竞争力在哪？

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

云服务器 GPU云服务器双向数据绑定 js双向数据绑定 js双向绑定数据 asp双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104176.html

JS之对象(2)

摘要：前言一篇彻底搞懂对象从此不用担心没对象啦本文从对象定义方法对象属性数据类型遍历几种方法对象拷贝和拦截对象属性方法及代码实现几个方面由浅入深介绍对象对象的声明方法字面量构造函数的作用创了一个新对象指向构造函数构造函数有返回会替换出来的对象如果 showImg(https://segmentfault.com/img/bVboXHr?w=550&h=392); 前言一篇彻底搞懂对象,从此...

CarterLi 2019-08-23 15:29 评论0 收藏0
Vue2.x 总结

摘要：结果对象语法。当然，使用并不是首选，只有在构建中大型单页面应用时，考虑到全局的状态管理，自然就会想到。页面路由使用创建单页面应用，就可以使用目前版本是，把组件映射到对应的路由，通过改变来渲染不同的页面。 Vue2.x 总结 Vue 是一套用于构建用户界面的渐进式框架也意味着，既可以把VUE作为该应用的一部分嵌入到一个现成的服务端应用，或者在前后端分离的应用中，利用Vue 的核心库及其...

banana_pi 2019-08-26 11:32 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0