一、使用計算屬性
模板內的表示式是非常便利的，但適用於簡單運算。在模板中放入太多的邏輯會讓模板過重且難以維護。
<在上述中字串的反轉邏輯放在模板中，這樣是不利於維護的，而且後期處理也不是那麼容易。對於複雜的邏輯，比較好的方式就是運用計算屬性。script
src="vue.js"
>
script
>
<
div
id>
<
p>}
p>
div>
<
script
>
varvm
=new
vue(
})script
>
<div
id>
<
p>}
p>
div>
<很明顯，此時將邏輯寫入到計算屬性中，這樣避免了模板中寫入大量的邏輯。script
>
varvm
=new
vue(,
computed:}})
script
>
二、偵聽屬性
偵聽屬性偵聽的是資料屬性，當data中的資料來源發生變動後，在計算屬性中就會有所體現。
<div
id>
<
p>}
p>
<
button
@click
="changedata"
>修改data資料來源msg
button
>
div>
<輸出：script
>
varvm
=new
vue(,
methods:
},computed:}})
script
>
可以看到，data中的資料一旦發生改變，vue立即偵聽到變化，並且反應到計算屬性中，從而在頁面中顯示。
三、計算屬性的setter
計算屬性預設是getter方法，但是它也有setter方法，這兩個方法是在何時呼叫呢？
//當獲取值時呼叫getter方法//當給值賦值時呼叫setter方法
<div
id>
<
p>}
p>
<
button
@click
="changedata"
>修改data資料來源msg
button
>
div>
var vm= new可以看到，當給計算屬性中的reversemsg賦值就會呼叫setter方法，其中的引數就是傳遞過來的新賦的值，當然你也可以不寫這個值，最後獲取值呼叫的就是setter中實際給的值。vue(,
methods:
},computed:,
get:
function
() }}})
Vue計算屬性和偵聽器
模板內的表示式非常便利，但是在模板中放入太多的邏輯會讓模板過重切難以維護。對於任何複雜邏輯都應該使用計算屬性。var vm new vue computed 這裡宣告乙個計算屬性reversemsg。我們提供的函式將作用屬性vm.reversemsg的getter函式。我們可以在表示式中呼叫方法來達...
計算屬性和偵聽器
1 計算屬性快取 vs 方法 將乙個函式定義為計算屬性和方法得到的結果是相同的。但不同的是計算屬性是基於它們的依賴進行快取的，只是在相關依賴發生改變時才會重新求值。方法 methods 計算屬性 computed 2 計算屬性 vs 偵聽屬性 偵聽屬性 觀察和響應vue例項上的資料變動 watch ...
計算屬性和偵聽器
div id example p original message p p computed reversed message p div var vm new vue computed 結果 original message hello computed reversed message olle...