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 ！！