區(qū)別: ko的subscribe vs computed vs extend

如果需要處理由值變化而引發(fā)另一個操作的場景,可以有幾種方式:

(1)Subscribe在單值變化的時候使用;

(2)Computed在多個值變化的時候使用;

(3)Extend則一般定義了通用方法,可以讓多個observable公用同一個extend方法,類似于C#里面的filter.

具體用法如下:

Subscribe, 該方法有3個參數(shù):

callback是由值變化后觸發(fā)的callback函數(shù)

Target:可選項,callback的this值

event可以定義callback 函數(shù)觸發(fā)的事件,比如:beforeChange,默認是用change

myViewModel.personName.subscribe(function(newValue) {? ? alert("Theperson's new name is "+ newValue);});

PS: KO的官方文檔里解釋是,KO在HTML里的聲明綁定(Decliaritivebinding),就是使用subscribe的機制來實現(xiàn)的。

既然可以顯示聲明subscribe,也就可以把它dispose掉

var subscription =myViewModel.personName.subscribe(function(newValue) {/* do stuff */});

// ...then later...

subscription.dispose();// I no longer want notifications

Computed:

如果在computed里面的KO對象的值有變更,都會觸發(fā)computed函數(shù)執(zhí)行:

functionAppViewModel(){this.firstName = ko.observable('Bob');

this.lastName = ko.observable('Smith');

}

functionAppViewModel(){

// ... leave firstName and lastNameunchanged ...

this.fullName = ko.computed(function() {

returnthis.firstName() +" "+this.lastName();

},this);}

這里,傳遞this是 為了在computed里讀取fistName和lastName.


區(qū)別:Computed VS Pure Computed

Pure Computed只有當有其他subscriber的時候才會有這個對象,所對應(yīng)的DOM對象 不激活的時候不存在,這樣可以防止內(nèi)存泄露,在Component等場景下不用擔心dispose的問題。

如果computed里面的對象不會有其他寫的操作,優(yōu)先使用pure computed

文章轉(zhuǎn)自這里

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容