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 !!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » angular脏值检测与vue数据劫持的区别有哪些?
码云笔记 » angular脏值检测与vue数据劫持的区别有哪些?