Vue.js 計算屬性

計算屬性關鍵詞: computed。

計算屬性在處理一些複雜邏輯時是很有用的。

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

實例 1

<divid="app">
{{ message.split("").reverse().join("") }}</div>

嘗試一下 ?

實例 1 中模板變的很複雜起來，也不容易看懂理解。

接下來我們看看使用了計算屬性的實例：

實例 2

<divid="app"><p>原始字元串: {{ message }}</p><p>計算後反轉字元串: {{ reversedMessage }}</p></div><script>var vm = new Vue({
el: "#app",
data: {
message: "Runoob!"
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split("").reverse().join("")
}
}
})</script>

實例 2 中聲明了一個計算屬性 reversedMessage 。

提供的函數將用作屬性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依賴於 vm.message，在 vm.message 發生改變時，vm.reversedMessage 也會更新。

computed vs methods

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

實例 3

methods: {reversedMessage2: function(){returnthis.message.split("").reverse().join("")}}

嘗試一下 ?

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

computed setter

computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：

實例 4

varvm = newVue({el: "#app", data: {name: "Google", url: "http://www.google.com"}, computed: {site: {// getterget: function(){returnthis.name + "" + this.url}, // setterset: function(newValue){varnames = newValue.split("")this.name = names[0]this.url = names[names.length - 1]}}}})// 調用 setter， vm.name 和 vm.url 也會被對應更新vm.site = "學習學習 http://www.run.com";document.write("name: " + vm.name);document.write("<br>");document.write("url: " + vm.url);

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！