angular脏值检测与vue数据劫持的区别有哪些?

答疑时间

angular脏值检测与vue数据劫持的区别有哪些?通过查阅相关资料以及个人理解为大家整理一下二者区别,希望对大家有一些参考价值好了话不多说,一起来看正文。

实现数据绑定的做法有大致如下几种:

  • 发布者-订阅者模式(backbone.js)
  • 脏值检查(angular.js)
  • 数据劫持(vue.js)

angular中的脏值检测

angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( interval )
  • 执行 apply()

优缺点

  • 原理上支持低端IE(记得最早的NG支持IE8),理论上兼容性更好
  • 适合大数据量的更新,CPU层面的时间复杂度为O(VModel),小量更新的diff有计算浪费
  • 可考虑配合类Immutable.js的轮子和思想优化,类似React + Redux + Immer
  • 需要手动调用,同setState,引入Zone.js后方便一些,大颗粒度更新都有这个问题

vue中的数据劫持

数据劫持主要通过 ES5 提供的Object.defineProperty方法来实现,监控对数据的操作,从而可以自动触发数据同步。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。

数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set、get 函数中。

优缺点

  • 使用JavaScript原生特性,但也需要支持ES5的浏览器,毕竟前端面向未来编程,所以Vue 3计划升级到ES6的Proxy实现
  • 适合小数据量(细颗粒度)的更新 ,CPU层面的时间复杂度为O(Change),代价是更多的内存占用(空间换时间)
  • 减少依赖收集的颗粒度(从关心某属性变了,改为只关心某对象变了)能优化内存问题
  • 其实Vue 2就是通过引入Virtual DOM,改为在子组件层面用diff的方式更新

两者区别

  • angular脏值检测原理上支持低端IE(记得最早的NG支持IE8),理论上兼容性更好;而vue数据劫持需要支持ES5的浏览器。
  • angular脏值检测适合大数据量的更新;而vue数据劫持适合小数据量(细颗粒度)的更新。

结语

以上就是码云笔记为大家整理的angular脏值检测与vue数据劫持的区别有哪些?的详细内容,更多好文请关注码云笔记其它相关文章!

更多前端开发知识,请查阅 码云笔记 mybj !!

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » angular脏值检测与vue数据劫持的区别有哪些?

发表评论