在Vue中，computed、watch和methods是處理響應(yīng)式數(shù)據(jù)的三種方式。它們的主要區(qū)別在于計(jì)算方式、響應(yīng)方式和使用場(chǎng)景。

computed

computed是一種計(jì)算屬性，它會(huì)根據(jù)所依賴的響應(yīng)式數(shù)據(jù)自動(dòng)計(jì)算出一個(gè)新的值，并且該計(jì)算結(jié)果會(huì)被緩存起來，只有當(dāng)所依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算，也就是說, 當(dāng)所依賴的數(shù)據(jù)沒有發(fā)生改變時(shí), 多次訪問計(jì)算屬性它會(huì)立即返回之前緩存的計(jì)算結(jié)果, 而不會(huì)再次執(zhí)行computed中的函數(shù)。而且computed本質(zhì)上是一個(gè)只讀屬性，它不會(huì)修改任何響應(yīng)式數(shù)據(jù)，只是根據(jù)所依賴的數(shù)據(jù)計(jì)算出一個(gè)新的值。

使用computed的好處在于它可以將復(fù)雜的計(jì)算邏輯封裝在一個(gè)屬性中，并且只有在需要時(shí)才會(huì)計(jì)算，并且在依賴數(shù)據(jù)沒有發(fā)生變化時(shí)只返回上一次的計(jì)算緩存值，從而提高了代碼的可讀性和性能。

computed: {
   get: function () { 
      return this.firstName + ' ' + this.lastName;// 必須要有return
  },
}

watch

watch是一種觀察者模式，它會(huì)在所觀察的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)執(zhí)行一個(gè)回調(diào)函數(shù)，在回調(diào)中會(huì)傳入newVal和oldVal兩個(gè)參數(shù)。watch可以監(jiān)聽一個(gè)或多個(gè)響應(yīng)式數(shù)據(jù)，并可以執(zhí)行一些異步操作，例如發(fā)送網(wǎng)絡(luò)請(qǐng)求或者操作本地存儲(chǔ)等。

使用watch的好處在于它可以監(jiān)控?cái)?shù)據(jù)的變化并執(zhí)行相應(yīng)的操作。例如，我們可以使用watch來監(jiān)聽一個(gè)輸入框的變化，并根據(jù)輸入框的值發(fā)送網(wǎng)絡(luò)請(qǐng)求：

watch: {
  inputValue(newValue, oldValue) {
    // 根據(jù)輸入框的值發(fā)送網(wǎng)絡(luò)請(qǐng)求
    fetch('http://example.com/api?query=' + newValue)
      .then(response => response.json())
      .then(data => this.result = data);
  }
}

在這個(gè)例子中，當(dāng)inputValue發(fā)生變化時(shí)，watch會(huì)自動(dòng)執(zhí)行回調(diào)函數(shù)，并根據(jù)輸入框的值發(fā)送網(wǎng)絡(luò)請(qǐng)求。

methods

methods是一個(gè)普通的JavaScript方法，它可以接收參數(shù)并且可以執(zhí)行任意的JavaScript代碼。methods不會(huì)自動(dòng)響應(yīng)數(shù)據(jù)變化，需要手動(dòng)調(diào)用才能更新視圖。methods方法是每次調(diào)用, 都會(huì)執(zhí)行函數(shù)的, methods而且它不是響應(yīng)式的。

使用methods的好處在于它可以執(zhí)行任意的JavaScript代碼，并且可以根據(jù)具體的需求傳入不同的參數(shù)。例如，我們可以使用methods來處理用戶的點(diǎn)擊事件：

methods: {
  handleClick(event) {
    // 處理用戶的點(diǎn)擊事件
    console.log('User clicked on', event.target);
  }
}

在這個(gè)例子中，當(dāng)用戶點(diǎn)擊某個(gè)元素時(shí)，會(huì)調(diào)用handleClick方法，并將事件對(duì)象作為參數(shù)傳入。

歸納三者不同點(diǎn)

methods，watch和computed都是以函數(shù)為基礎(chǔ)的，但各自卻都不同；

1、methods

不存在緩存，執(zhí)行一次運(yùn)行一次，執(zhí)行n次，運(yùn)行n次

2、computed

使用場(chǎng)景：當(dāng)頁(yè)面中有某些數(shù)據(jù)依賴其他數(shù)據(jù)進(jìn)行變動(dòng)的時(shí)候，可以使用計(jì)算屬性
計(jì)算屬性 computed 是基于data中數(shù)據(jù)進(jìn)行處理的，data數(shù)據(jù)變化，他也跟著變化
當(dāng)data中數(shù)據(jù)沒有發(fā)生改變時(shí)，我們調(diào)用computed中函數(shù)n次，只會(huì)進(jìn)行緩存（執(zhí)行一次）
每個(gè)計(jì)算屬性都包含兩個(gè)set、get 屬性
<div>{{get}} </div> //調(diào)用時(shí)候，直接寫上函數(shù)名即可

computed: {
   get: function () { //這里不適合寫 get()，語(yǔ)法規(guī)定
     return this.firstName + ' ' + this.lastName;// 必須要有return
  },
}

3、watch

使用場(chǎng)景：數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作，可以隨時(shí)修改狀態(tài)的變化
watch:類似于監(jiān)聽機(jī)制+事件機(jī)制。
在大部分情況下我們都會(huì)使用computed，但如果要在數(shù)據(jù)變化的同時(shí)進(jìn)行異步操作或者是比較大的開銷，那么watch為最佳選擇。watch為一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。
// 這里直接用 v-model 來綁定，不需要添加 change 事件

<input type="text" v-model="name" />  {{tip}}
  data() {
    return {
      name: "",
      tip: ""
    };
  },
  methods: {
    checkName(value) {
      var arg = this;
      setTimeout(() => {
        if (value == "aa") {
          arg.tip = "用戶名已存在";
        } else {
          arg.tip = "用戶名可以使用";
        }
      }, 1000);
    }
  },
  watch: {// 數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作
    name(value) {
      this.checkName(value);
      this.tip = "正在驗(yàn)證......";
    }
  }

watch的高級(jí)用法

上面的watch方法是當(dāng)改變值時(shí)候，才會(huì)觸發(fā)監(jiān)聽事件，但是我們想剛進(jìn)入頁(yè)面時(shí)候，就觸發(fā)監(jiān)聽事件，就要用handler（）方法
1，handler（）：當(dāng)頁(yè)面剛進(jìn)入時(shí)，自動(dòng)綁定watch事件，不需要進(jìn)行觸發(fā)

watch: {// 頁(yè)面加載時(shí)，就自動(dòng)觸發(fā)此事件
  name:{
    handler(new){
       this.checkName(value);
       this.tip = "正在驗(yàn)證......";
    }
  }
}

2，immediate屬性：布爾值
immediate：true：首次加載就監(jiān)聽數(shù)據(jù)變化
immediate：false：只有發(fā)生改變才監(jiān)聽

watch: {// 頁(yè)面加載時(shí)，就自動(dòng)觸發(fā)此事件
  name:{
    handler(new){
       this.checkName(value);
       this.tip = "正在驗(yàn)證......";
    },
     immediate: true 
  }
}

3，deep:true；當(dāng)需要監(jiān)聽一個(gè)對(duì)象的改變時(shí)，普通的watch方法無法監(jiān)聽到對(duì)象內(nèi)部屬性的改變，此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽。

data（） {
  return {
      name: {
          'fristname': 'a',
          'lastname': 'a'
      },
      nameCount:0
  }
}，
watch: {
  name: {
      handler(newVal) {
          this.name++
      },
  deep: true
  }    
}

設(shè)置deep:true則可以監(jiān)聽到name的變化，此時(shí)會(huì)給name的所有屬性都加上這個(gè)監(jiān)聽器，當(dāng)對(duì)象屬性較多時(shí)，每個(gè)屬性值的變化都會(huì)執(zhí)行handler。
如果只需要監(jiān)聽對(duì)象中的一個(gè)屬性值，可以字符串的形式監(jiān)聽對(duì)象屬性：

watch: {
  'name.first': {
      handler(newVal) {
          this.name++
      },
  deep: true
  }    
}

到此這篇關(guān)于Vue中computed屬性和watch,methods的區(qū)別的文章就介紹到這了,更多相關(guān)Vue computed屬性和watch,methods內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論