regularjs / regular

regularjs: a living template engine that helps us to create data-driven component.
http://regularjs.github.io/
MIT License
1.06k stars 149 forks source link

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

Closed leeluolee closed 8 years ago

leeluolee commented 8 years ago

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款),目前基本在所有框架中属于绝对的第一梯队

swit1983 commented 7 years ago
config:function(){
                    this.$watch('vList', function(newValue, oldValue) {
                        if(newValue){
                            newValue = newValue.sort(function(a, b) {
                                return a.ording > b.ording;
                            });
                        }
                    },{stable: true});
                }

在没有参数 stable 之前,vList 超过10条记录 会循环依赖不断触发watch,加了就好了。“稳定“是什么含义?加了stable以后,watch 中的赋值就不会再次触发watch 直到稳定状态? 第二个问题,早在watch 里面改变另一个对象的值,加了stable 会触发另一个对象的watch吗?