博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
脏治检查实现原理
阅读量:4679 次
发布时间:2019-06-09

本文共 1261 字,大约阅读时间需要 4 分钟。

1. 使用对象的watch/unwatch方法直接监控属性的变化

这个直接监控对象的属性变化,有变动直接调用对应的回调,很方便的样子,但是:

213419-20170812150317101-1435371611.png

2. 新旧值对比

配置两个全局对象,一个对象保存之前的值,一个保存修改后的值,对比两个对象就能知道哪些属性发生了变化. 你可以定时循环检测,也可以在赋值操作上做点文章实现主动触发更新

3. 为属性配置属性设置器

  1. - Object.defineProperty(obj, prop, descriptor)

如果你懂java或者其他后端语言,一个属性可以有getter和setter,当修改一个属性的时候会调用setter,也就是主动的执行了一个方法。同样的在js中我们也可以这样实现。

var obj = {}Object.defineProperty(obj, 'name', {    set: function(val) {        this._name = val;        console.log('set name: ', this._name);    },    get: function() {        console.log('get name');        return this._name;    }})obj.name = 'CooMark'console.log(obj.name)// set name:  CooMark// get name// CooMark

这样就不需要遍历所有的属性了,属性发生变化的时候会主动执行检查,帅爆了

descriptor对象属性简介

  1. value: 属性的值
  2. writable: 如果为false,属性的值就不能被重写,只能为只读了
  3. configurable: 总开关,一旦为false,就不能再设置他的(value,writable,configurable)
  4. enumerable: 是否能在for...in循环中遍历出来或在Object.keys中列举出来。
  5. get: 执行属性赋值的回调
  6. set: 执行属性取值时执行的回调

vuejs的实现

Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

转载于:https://www.cnblogs.com/wancy86/p/dirty_check.html

你可能感兴趣的文章
昨天用的流量有点多60M
查看>>
kafka中的消费组
查看>>
Golang的channel使用以及并发同步技巧
查看>>
【JDK源码分析】 String.join()方法解析
查看>>
【SICP练习】112 练习3.28
查看>>
python--注释
查看>>
前端资源链接 ...
查看>>
yum install ntp 报错:Error: Package: ntp-4.2.6p5-25.el7.centos.2.x86_64 (base)
查看>>
leetcode-Single Number-136
查看>>
CF715C Digit Tree
查看>>
二分法练习1
查看>>
QT 制作串口调试小助手----(小白篇)
查看>>
前端MVC实践之hellorocket——by张舒彤
查看>>
OptimalSolution(2)--二叉树问题(3)Path路径问题
查看>>
IPC 之 Messenger 的使用
查看>>
爱情八十六课,等得不是爱情
查看>>
企业网站建设流程
查看>>
数据库的显示、创建、使用 、用户授权管理及忘记root用户后重置密码
查看>>
ES5和ES6中的继承 图解
查看>>
macos 下usb键盘问题.
查看>>