pidof -x 不管用_Vue2.x 与Vue3.x 双向数据绑定区别

acb08317fd6d0bfb622cc8468aebf870.png

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

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

e0c75965aef3e269e000add079f90415.png

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

93cfbb9af1806b384f7529c5041cffce.png

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

8247de1d25a7d2617577112db87c7be9.png

But

3b35e6f04a611a7b0ff033e42d47e24c.png

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

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值