Vue中computed和methods的差別
- computed詳解
-
- computed和methods的差別
computed詳解
computed可以完成各種複雜的邏輯，包括運算、函數調用等，隻要最終傳回一個結果就可以。下面是一個簡易的電腦，來實作乘法的操作
<body>
<div id="app">
長度：<input v-model="length" type="text" /><br /> 寬度：
<input v-model="width" type="text" /><br /> 面積：
<input v-model="areas" type="text" />
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
length: '',
width: '',
},
computed: {
areas: function() {
console.log('調用computed')
return this.length * this.width
}
}
})
</script>
</body>
當在長度文本框和寬度的文本框裡輸入值的時候，面積會自動給出。這裡的 computed 的操作比較簡單，傳回值也比較好寫。但當遇到比較麻煩的操作時，我們就需要傳回自定義的傳回值。
<body>
<div id="app">
總價:<input v-model="prices" type="text"/>
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
package1: [
{
name: 'iPhone 7',
price: 7199,
count: 2
},
{
name: 'iPad',
price: 2888,
count: 1
}
],
package2: [
{
name: 'apple',
price: 3,
count: 5
},
{
name: 'banana',
price: 2,
count: 10
}
]
},
computed: {
prices: function() {
var prices = 0
for (var i = 0; i < this.package1.length; i++) {
prices += this.package1[i].price * this.package2[i].count;
}
for (var i = 0; i < this.package2.length; i++) {
prices += this.package2[i].price * this.package2[i].count;
}
return prices
}
}
})
</script>
</body>
自定的 prices 的幾個值要保持一緻，而且不能與 data 重複，也不需要在 data 裡聲明。
computed和methods的差別
我們用 computed 屬性和 methods 方法編寫一個電腦的乘法與加法計算。
<body>
<div id="app">
長度：<input v-model="length" type="text" /><br /> 寬度：
<input v-model="width" type="text" /><br /> 面積：
<input v-model="areas" type="text" />
<button @click="add()">+</button><br /> 和的值為：
<input v-model="num" />
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
length: '',
width: '',
num: ''
},
computed: {
areas: function() {
console.log('調用computed')
let areas = 0
areas = this.length * this.width
return areas
/*console.log("computed被調用了")*/
}
},
methods: {
add: function() {
console.log('調用methods')
this.num = parseInt(this.length) + parseInt(this.width)
},
}
})
</script>
</body>
- 用 computed 屬性方法編寫的邏輯運算，在調用時直接将傳回時 areas 視為一個變量值就可使用，無需進行函數調用。computed 具有緩存功能，在系統剛運作的時候調用一次。隻有隻有當計算結果發生變化才會被調用。比如，我們在長度框與寬度框更改值的時候每次更改 computed 都會被調用一次，很浪費資源。
- 用 methods 方法編寫的邏輯運算，在調用時 add() 一定要加“()”，methods 裡面寫的多位方法，調用方法一定要有（）。methods方法頁面剛加載時調用一次，以後隻有被調用的時候才會被調用。我們在長度框和寬度框的值輸入完以後，點選“+” methods 方法調用一次。這裡很明顯我們采用 methods 會更節省資源。
目前來看 computed 屬性的優勢還是沒有展現出來，我們再舉一個例子。
<body>
<div id="app">
{{ reversedText }}
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '123,456'
},
computed: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>
這個輸出的結果就是 456,123
<body>
<div id="app">
{{ reversedText() }}
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '123,456'
},
methods: {
reversedText: function() {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
</body>
輸出的結果也是 456,123 但兩者之間的差别就是在計算結果不發生改變的情況下，computed 的方法隻被調用了一次，即便是多處多次調用，computed 也隻被調用一次，這就是 computed 緩存的優勢。那麼在哪些情況下更适合使用 computed ？一般使用簡單的表達式對内容進行簡單的轉換與使用過濾器對内容進行簡單的轉換用的比較多。