什麼是計算屬性
如下，對於任何複雜邏輯，應當使用計算屬性。
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>計算屬性-01</title>
</head>
<body>
<div id="app">
<p>
firstName: <input type="text" v-model="firstName">
</p>
<p>
lastName: <input type="text" v-model="lastName">
</p>
<p>
fullNameByComputed: {{fullNameByComputed}}
</p>
<p>
fullNameByMethod: {{fullNameByMethod()}}
</p>
<p>
now: {{now}}
</p>
<p>
now1: {{now1()}}
</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
(function() {
var app = new Vue({
el: '#app',
data: {
firstName: 'pxy',
lastName: 'amos'
},
methods: {
fullNameByMethod: function() {
return this.firstName + '.' + this.lastName;
},
now1: function () {
return Date.now();
}
},
<!-- 計算屬性 -->
computed: {
fullNameByComputed: function () {
return this.firstName + '.' + this.lastName;
},
now: function () {
return Date.now();
}
}
});
})();
</script>
</body>
</html>
爲什麼不用methods代替Computed
在上示例中，計算屬性只有在它的相關依賴發生改變時纔會重新求值。這就意味着只要 firstName 或者 lastName 還沒有發生改變，多次訪問 fullNameByComputed 計算屬性會立即返回之前的計算結果，而不必再次執行函數。相比之下，每當觸發重新渲染時，調用methods將總會再次執行函數。
使用計算屬性還是 methods 取決於你是否需要緩存，當遍歷大數組和做大量計算時，應當使用計算屬性，除非你不希望得到緩存。
上示例中，在輸入框中輸入內容時，頁面上now的值不會改變，但是now1的值會跟着變動。如下↓↓↓：
計算屬性的getter和setter
絕大多數情況下，我們只會用默認的 getter 方法來讀取一個計算屬性，在業務中很少用到setter，所以在聲明一個計算屬性時，可以直接使用默認的寫法，不必將 getter 和 setter 都聲明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>計算屬性-02</title>
</head>
<body>
<div id="app">
<p>
firstName: <input type="text" v-model="firstName">
</p>
<p>
lastName: <input type="text" v-model="lastName">
</p>
<p>
fullName: <input type="text" v-model="fullName">
</p>
<p>
fullName1: <input type="text" v-model="fullName1">
</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
(function() {
var app = new Vue({
el: '#app',
data: {
firstName: 'pxy',
lastName: 'amos'
},
computed: {
fullName: {
get: function () {
return this.firstName + '-' + this.lastName;
},
<!-- 當fullName變化時，firstName和lastName也會變化 -->
set: function(newVal) {
var names = newVal.split('-');
this.firstName = names[0];
this.lastName = names[1];
}
},
<!-- 默認就是上邊fullName中get-->
fullName1:function(){
return this.firstName + '-' + this.lastName;
}
}
});
})();
</script>
</body>
</html>