您好,欢迎访问一九零五行业门户网

angular脏值检测与vue数据劫持的区别是什么

区别:1、angular脏值检测原理上支持低端ie,理论上兼容性更好;vue数据劫持需要支持es5的浏览器。2、angular脏值检测适合大数据量的更新;vue数据劫持适合小数据量的更新。
相关推荐:《angular教程》、《vue.js教程》
实现数据绑定的做法有大致如下几种:
发布者-订阅者模式(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数据劫持适合小数据量(细颗粒度)的更新。
相关推荐:
2020年前端vue面试题大汇总(附答案)
vue教程推荐:2020最新的5个vue.js视频教程精选
更多编程相关知识,请访问:编程入门!!
以上就是angular脏值检测与vue数据劫持的区别是什么的详细内容。
其它类似信息

推荐信息