如題,在vue.js官方文檔中看到computed和watch獲取全名的一個(gè)例子:
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
菜鳥(niǎo)表示不太懂他們之間的區(qū)別,難道watch就不可以像computed那樣來(lái)獲取嗎?
擁有18年軟件開(kāi)發(fā)和IT教學(xué)經(jīng)驗(yàn)。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項(xiàng)目經(jīng)理、高級(jí)軟件工程師等職務(wù)。 網(wǎng)絡(luò)人氣名人講師,...
我覺(jué)得還是有區(qū)別的,而且兩種應(yīng)用的情形應(yīng)該區(qū)分開(kāi)。
計(jì)算屬性是計(jì)算屬性,觀察是觀察。
計(jì)算屬性顧名思義就是通過(guò)其他變量計(jì)算得來(lái)的另一個(gè)屬性,fullName在它所依賴firstName,lastName這兩個(gè)變量變化時(shí)重新計(jì)算自己的值。
另外,計(jì)算屬性具有緩存。計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要 lastName和firstName都沒(méi)有發(fā)生改變,多次訪問(wèn) fullName計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果,而不必再次執(zhí)行函數(shù)。
而觀察watch是觀察一個(gè)特定的值,當(dāng)該值變化時(shí)執(zhí)行特定的函數(shù)。例如分頁(yè)組件中,我們可以檢測(cè)頁(yè)碼執(zhí)行獲取數(shù)據(jù)的函數(shù)。
可以再詳細(xì)的查看一下文檔:https://cn.vuejs.org/v2/guide...
簡(jiǎn)單來(lái)看computed是基于緩存進(jìn)行的,watch等于一個(gè)函數(shù)。個(gè)人覺(jué)得會(huì)用就行了,具體區(qū)別移駕具體區(qū)別
覺(jué)得還是計(jì)算屬性用的能廣泛一些吧