computed 和 methods
在new Vue的配置參數中的computed和methods均可以處理大量的邏輯代碼,可是何時用哪一個屬性,要好好區分一下才能作到正確的運用vue。
computed稱爲計算屬性,顧名思義,計算就要返回一個計算的結果,因此,當咱們要處理大量的邏輯,可是最後要取得最後的結果的時候能夠用computed;
簡單示例:
要求:
<input type="text v-model="num1"><input type="text v-model="num2">
如今要返回num1和num2的和;vue
<script>
new Vue({ el:"#box", data:{ num1:0, num2:0 } computed:{ result:function(){ return this.num1 + this.num2 // 計算屬性必須有一個返回值
} } }) </script>
methods:是方法的意思,在js中,咱們把一些函數叫作方法,通常狀況下,要觸發這個方法就要執行,要執行就要有一個源來觸發,因此就須要一個事件源。
這是和computed的一點不一樣之處;
methods的示例:
緩存
<\button @click="do()">點擊彈出<\/button>
<script>
new Vue({ el:"#box", data:{ num1:0, num2:0 } methods:{ do:function(){ alert('ok') //這裏根據狀況,能夠返回有返回值也能夠沒有返回值。
} } }) </script>
對比computed 和 methods:
computed計算的結果若是不發生改變就不會觸發result這個函數。而methods中通常都是定義的須要事件觸發的一些函數。每次只要觸發事件,
就會執行對應的方法。若是把computed中的方法寫到method中會浪費性能。
computed必須返回一個值頁面綁定的才能取得值,而methods中能夠只執行邏輯代碼,能夠有返回值,也能夠沒有ide
computer 和 watch函數
//這是computer的
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
//這是watch的說法
var var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
總結computer和watch:
計算屬性是計算屬性,觀察是觀察。
計算屬性顧名思義就是經過其餘變量計算得來的另外一個屬性,fullName在它所依賴firstName,lastName這兩個變量變化時從新計算本身的值。
另外,計算屬性具備緩存。計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 lastName和firstName都沒有發生改變,屢次訪問 fullName計算屬性會當即返回以前的計算結果,而沒必要再次執行函數。
而觀察watch是觀察一個特定的值,當該值變化時執行特定的函數。例如分頁組件中,咱們能夠檢測頁碼執行獲取數據的函數。
能夠再詳細的查看一下文檔:https://cn.vuejs.org/v2/guide...性能