Vue計算屬性和監聽屬性

可以看下以下反轉字串的例子：

"

">}
//模板變的很複雜起來，也不容易看懂理解

使用了計算屬性的例項：

"

">
原始字串: }
計算後反轉字串:}

例項中宣告了乙個計算屬性 reversedmessage 。提供的函式將用作屬性 vm.reversedmessage 的 getter 。vm.reversedmessage 依賴於 vm.message，在 vm.message 發生改變時，vm.reversedmessage 也會更新。

我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴快取，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函式總會重新呼叫執行。

methods: }}

可以說使用 computed 效能會更好，但是如果你不希望快取，你可以使用 methods 屬性。

此外，computed 物件內的方法如果在初始化時繫結到元素上的事件會先執行一次這個方法 ，而 methods 內的方法則不會。

computed 屬性預設只有 getter ，不過在需要時你也可以提供乙個 setter ：

"

">
}

結果顯示的就不是預設的name和url值，而不是 vm.site 的 setter 的值。

setter 會被呼叫， vm.name 和 vm.url 也會被對應更新。

監聽屬性 watch，我們可以通過 watch 來響應資料的變化。

"

computed_props
">千公尺 : 
"text
" v-model = "
kilometers
">公尺 : 
"text
" v-model = "
meters
">
"info
">

以上**中我們建立了兩個輸入框，data 屬性中， kilometers 和 meters 初始值都為 0。

watch 物件建立了兩個方法 kilometers 和 meters。

當我們再輸入框輸入資料時，watch 會實時監聽資料變化並改變自身的值。

Vue計算屬性和監聽屬性

可以看下以下反轉字串的例子 模板變的很複雜起來，也不容易看懂理解 使用了計算屬性的例項 原始字串 計算後反轉字串 例項中宣告了乙個計算屬性 reversedmessage 提供的函式將用作屬性 vm.reversedmessage 的 getter vm.reversedmessage 依賴於 vm...

Vue計算屬性和監聽屬性

1 關鍵字 2 計算屬性 ku 姓 text v model lastname input 名 text v model firstname input 姓名 text v model fullname input div template export default computed metho...

vue 4 計算屬性 監聽屬性

div newvue script 例項 1中模板變的很複雜起來，也不容易看懂理解。接下來我們看看使用了計算屬性的例項 原始字串 p 計算後反轉字串 p div var vm newvue computed script computed 與 methods 我們可以使用 methods 來替代 c...