computed 、methods 和 watch

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...性能

相關文章
相關標籤/搜索