关于watch中的stable参数解决死循环的问题?
Closed this issue · 4 comments
swit1983 commented
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吗?
leeluolee commented
将watcher目前分为stable 和 非stable 两类。 stable的意义是 这个watch回调不会修改别的依赖数据。这样regular会将其放置到最后进行处理。 事实上大部分内部增加的watcher比如插值 directive等都是stable的,其实也大大增加了运行性能。
swit1983 commented
不加stable 为啥超过10条会死循环啊,没啥特别的啊,加了stable 之后出现奇怪问题,触发this.xxx 事件失败,但是会调用 watch("vList")
<script type="text/tpl" id="attrTpl">
<form class="form-horizontal col-md-8">
<input type="hidden" name="id">
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="siteName"> 属性名称: </label>
<div class="col-sm-9">
<input type="text" r-model={name} class="col-xs-10 col-sm-7"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="siteType"> 属性描述: </label>
<div class="col-sm-9">
<textarea r-model={remark} class="col-xs-10 col-sm-7"></textarea>
</div>
</div>
{#list vList as v}
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="siteType"> 属性值: </label>
<div class="col-sm-9">
<input type="text" r-model={v.attributeValue} class="col-xs-10 col-sm-7"/>
<i class="ace-icon glyphicon glyphicon-download value-op" on-click={this.orderDown(v_index)}></i>
<i class="ace-icon glyphicon glyphicon-upload value-op" on-click={this.orderUp(v_index)}></i>
<i class="ace-icon glyphicon glyphicon-trash value-op" on-click={this.valueDel(v_index)}></i>
</div>
</div>
{/list}
<div class="clearfix form-actions">
<div class="col-md-offset-3 col-md-9">
<button class="btn btn-info" type="button" id="submitBtn">
<i class="ace-icon fa fa-check bigger-110"></i>提交
</button>
<button class="btn" type="button" id="cancelBtn">
<i class="ace-icon fa fa-undo bigger-110"></i> 取消
</button>
</div>
</div>
</form>
</script>
var attrFormComponent = new Regular({
template: '#attrTpl',
config:function(){
this.$watch('vList', function(newValue, oldValue) {
if(newValue){
newValue = newValue.sort(function(a, b) {
return a.ording > b.ording;
},{stable:true});
this.data.testname="123";
}
});
this.$watch('testname', function(newValue, oldValue) {
console.log(newValue);
});
},
init:function(){
},
data:{
},
orderDown:function(index){
console.log(this.data.testname);
},
orderUp:function(index){
},
valueDel:function(index){
}
});
attrFormComponent.$inject('#attrForm');
$("#listBody").on("click", ".js_attr_edit", function() {
var _that = $(this);
var id = _that.data("id");
postJSON("${rc.contextPath}/p/attr/goedit", {id:id}, function(data) {
if (data.result == "true") {
attrFormComponent.data=data.value;
attrFormComponent.$update();
s.next();
} else {
showError("保存失败!");
}
});
});
data 动态取的,我一触发this.orderDown() 就会进入到vList的watch 好奇怪
leeluolee commented
看下,是不是你sort处理,导致list没稳定下来 。regular会处理到数据不再更改,你这种应该不属于stable,但是可能你watch回调里改变的数据没稳定下来 .http://regularjs.github.io/guide/zh/advanced/dirty.html 看下脏检查的定义
rainfore commented
newValue = newValue.sort(function(a, b) {
return a.ording - b.ording;
});
试试,用大于不一定能稳定下来。