vue中methods，computed,watch方法的區別

喝咖啡的加菲發表於2018-04-13
Vue

vue中mothods，computed,watch方法的區別

對於一些需要變動的值，比如最初的時候有一個值，在之後我們要將他進行改變。
可選的思路：
1.通過change或者click等這類事件來觸發一個函式，在函式內部去修改一個變數。
2.通過watch的方法，監聽被改變的變數，然後在watch的那個變數命名的函式中去對我們要修改的值進行重新的賦值，或者是觸發一次更新。
3.使用computed的方法，監聽一個變數，通過return一個新的變數的方式來更新一個變數的資料。

執行的不同點

1.methods的方法是通過觸發一個事件或者函式的回撥來實現資料的更新，他的執行，依賴於事件的觸發。
2.watch的類似於emit與on這種觸發的方式，通過vue的$watch例項監聽值得改變來自動的觸發一個函式的執行。
3.computed函式的執行最快也是執行最靠前的，在html渲染開始，就已經執行了。

應用場景

methods事件的觸發就不說了，直接回撥或者是繫結的@這樣的事件來觸發。
而watch的觸發消耗也大，每次資料的改變就要觸發一次函式的執行，要節省著點用啊。
computed用在改變一個變數的顯示，和data物件裡的資料屬性是同一類的。返回的值直接就修改掉了原先的值，最大的優點在於簡潔速度快也可以作為一個過濾器用也可以起到data中宣告一個變數的作用，依賴別的變數來顯示新的變數。

<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{message.split(``).reverse().join(``)}}"</p> 
 var vm = new Vue({
  el: `#example`,
  data: {
      message: `Hello`
         },
  computed: {
  reversedMessage: function () {
        //代替上邊的模板的表示式
       return this.message.split(``).reverse().join(``)
  }}})

相關文章