Skip to content

标记没有side effects的watcher 增加$watch接口的stable参数 #128

@leeluolee

Description

@leeluolee

Regularjs是基于脏检查的,当数据发生改变时,Regularjs至少会检查两次,因为要消除第一次循环可能带来的数据变化,比如

this.$watch('a', function(a){
   this.data.b = a+ 1;
})

经过这个watcher后,数据b其实也发生了改变。 但实际上我们只需要再检查上述可能会带来的watcher对象,而无需检查安全的watcher.

在新版本中,$watch接口引入了一个新的参数

component.$watch('blog.title', function(tltle){
     div.textContent = title
}, {stable: true})

这个watch的回调不会产生数据层的边界效应, 它会被推入到_stableWatchers数组里(与_watchers相区分).

原流程

update -> digest(_watchers) ->  ...直到稳定  ->  done


修改为了

update -> digest(_watchers) ->  ...直到稳定  -> digest(_stableWatchers) -> done

由于原码中就有大量的stable的watcher,所以带来了客观的性能提高,这个与$unwatch的优化不同,主要是提高了 更新的效率, 大约有10%的性能提高,特别是在极端情况中,比如比现在 在 http://mathieuancelin.github.io/js-repaint-perfs/regularjs/ 的DEMO(使用的0.4._版本),_提高了约 6-10的fps*( macbook pro 13寸 2014款),目前基本在所有框架中属于绝对的第一梯队

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions