從作用機制和性質上看待methods,watch和computed的關系

作用機制上

從性質上看

computed:{
    fullName: 
 
function () { return  this.firstName + lastName }
}

watch: {
   firstName: function (val) {  this.fullName = val + this.lastName }
}

watch和computed的對比

watch擅長處理的場景：一個數據影響多個數據

var vm = new Vue({
  el: ‘#app‘,
  /*
   data選項中的數據：
   1.haiZeiTuan_Name --> 海賊團名稱
   2.船員的名稱 = 海賊團名稱（草帽海賊團） + 船員名稱（例如索隆）
 
   這些數據裏存在這種關系：
   （多個）船員名稱數據 --> 依賴於 --> （1個)海賊團名稱數據
    一個數據變化 --->  多個數據全部變化
  */
  data: {
    haiZeiTuan_Name: ‘草帽海賊團‘,
    suoLong: ‘草帽海賊團索隆‘,
    naMei: ‘草帽海賊團娜美‘,
    xiangJiShi: ‘草帽海賊團香吉士‘
  },
  /*
   在watch中，一旦haiZeiTuan_Name（海賊團名稱）發生改變
   data選項中的船員名稱全部會自動改變 （suoLong，naMei，xiangJiShi）
   並把它們打印出來
  */
  watch: {
    haiZeiTuan_Name: function (newName) {
      this.suoLong = newName + ‘索隆‘
      this.naMei = newName + ‘娜美‘
      this.xiangJiShi = newName + ‘香吉士‘
      console.log(this.suoLong)
      console.log(this.naMei)
      console.log(this.xiangJiShi)
    }
  }
})
 
// 更改watch選項中監控的主數據
vm.haiZeiTuan_Name = ‘橡膠海賊團‘

// 更改watch選項中監控的主數據
vm.haiZeiTuan_Name = ‘肉肉海賊團‘

demo:

computed擅長處理的場景：一個數據受多個數據影響

var vm = new Vue({
  el: ‘#app‘,
  /*
   data選項中的數據：firstName，secName,thirdName
   computed監控的數據：lufei_Name
   兩者關系： lufei_Name = firstName + secName + thirdName
   所以等式右邊三個數據任一改變，都會直接修改 lufei_Name
  */
  data: {
    // 路飛的全名：蒙奇·D·路飛
    firstName: ‘蒙奇‘,
    secName: ‘D‘,
    thirdName: ‘路飛‘
  },
  computed: {
    luFei_Name: function () {
      return this.firstName + this.secName + this.thirdName
    }
  }
})
 
// 將“路飛”改為“海軍王”
vm.thirdName = ‘海軍王‘
// 打印路飛的全名
console.log(vm.luFei_Name)

 

demo:

但是：

// 將“D”改為“H”
vm.secName = ‘H‘
// 打印路飛的全名
console.log(vm.luFei_Name)

methods不處理數據邏輯關系，只提供可調用的函數

new Vue({
  el: ‘#app‘,
  template: ‘<div id="app"><p>{{ say() }}</p></div>‘,
  methods: {
    say: function () {
      return ‘我要成為海賊王‘
    }
  }
})

從功能的互補上看待methods,watch和computed的關系

利用computed處理methods存在的重復計算情況

new Vue({
  el: ‘#app‘,
  // 設置兩個button，點擊分別調用getMethodsDate,getComputedDate方法
  template: ‘<div id="app"><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed</button></div>‘,
  methods: {
    getMethodsDate: function () {
      alert(new Date())
    },
    // 返回computed選項中設置的計算屬性——computedDate
    getComputedDate: function () {
      alert(this.computedDate)
    }
  },
  computed: {
    computedDate: function () {
      return new Date()
    }
  }

利用computed處理watch在特定情況下代碼冗余的現象，簡化代碼

new Vue({
  el: ‘#app‘,
  data: {
    fullName: ‘彭湖灣‘,
    firstName: ‘彭‘,
    secName: ‘湖‘,
    thirdName: ‘灣‘
  },
  // watch中的代碼顯然是同類型，重復的，它並不簡潔，也不優雅
  watch: {
    firstName: function (newValue) {
      this.fullName = newValue + this.secName + this.thirdName
      console.log(this.fullName)
    },
    secName: function (newValue) {
      this.fullName = this.firstName + newValue + this.thirdName
      console.log(this.fullName)
    },
    thirdName: function (newValue) {
      this.fullName = this.firstName + this.secName + newValue
      console.log(this.fullName)
    }
  }
})

new Vue({
  el: ‘#app‘,
  data: {
    fullName: ‘彭湖灣‘,
    firstName: ‘彭‘,
    secName: ‘湖‘,
    thirdName: ‘灣‘
  },
  // 對watch中的代碼進行重構，實現同樣效果
  computed: function () {
    this.fullName = this.firstName + this.secName + this.thirdName
    console.log(this.fullName)
  }
})

【Vue】Vue的依賴追蹤系統 ——搞懂methods watch和compute