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

computed

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

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

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

watch

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

使用watch的好處在于它可以監(jiān)控數(shù)據(jù)的變化并執(zhí)行相應的操作。例如，我們可以使用watch來監(jiān)聽一個輸入框的變化，并根據(jù)輸入框的值發(fā)送網絡請求：

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

在這個例子中，當inputValue發(fā)生變化時，watch會自動執(zhí)行回調函數(shù)，并根據(jù)輸入框的值發(fā)送網絡請求。

methods

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

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

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

在這個例子中，當用戶點擊某個元素時，會調用handleClick方法，并將事件對象作為參數(shù)傳入。

歸納三者不同點

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

1、methods

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

2、computed

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

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

3、watch

使用場景：數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作，可以隨時修改狀態(tài)的變化
watch:類似于監(jiān)聽機制+事件機制。
在大部分情況下我們都會使用computed，但如果要在數(shù)據(jù)變化的同時進行異步操作或者是比較大的開銷，那么watch為最佳選擇。watch為一個對象，鍵是需要觀察的表達式，值是對應回調函數(shù)。值也可以是方法名，或者包含選項的對象。
// 這里直接用 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ù)變化時執(zhí)行異步或開銷較大的操作
    name(value) {
      this.checkName(value);
      this.tip = "正在驗證......";
    }
  }

watch的高級用法

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

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

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

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

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

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

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

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

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

最新評論