vue2知識點總結(jié)

watch:?

watch?是 Vue 提供的一個選項，它允許你觀察 Vue 實例上的數(shù)據(jù)變化。當(dāng)觀察的數(shù)據(jù)發(fā)生變化時，會執(zhí)行相應(yīng)的回調(diào)函數(shù)，這樣你就可以對數(shù)據(jù)的變化做出響應(yīng)，執(zhí)行一些特定的操作。?

export default {data() {return {message: ''};},watch: {message(newValue, oldValue) {console.log('message 從', oldValue,'變成了', newValue);}}
};

• 在上述代碼中：
  • watch?是 Vue 組件的一個選項，是一個對象。
  • message?是要觀察的數(shù)據(jù)屬性。
  • message?的值是一個函數(shù)，這個函數(shù)接收兩個參數(shù)：newValue?和?oldValue。
  • 當(dāng)?message?的值發(fā)生變化時，該函數(shù)會被調(diào)用，newValue?表示變化后的新值，oldValue?表示變化前的舊值。

?

• 數(shù)據(jù)監(jiān)聽和響應(yīng)：

  • 最常見的使用場景是當(dāng)某個數(shù)據(jù)發(fā)生變化時，需要執(zhí)行一些邏輯，例如發(fā)送網(wǎng)絡(luò)請求、更新另一個數(shù)據(jù)或執(zhí)行一些計算操作。

  export default {data() {return {searchText: '',searchResults: []};},watch: {searchText(newValue) {// 當(dāng) searchText 發(fā)生變化時，發(fā)起網(wǎng)絡(luò)請求this.fetchSearchResults(newValue);}},methods: {async fetchSearchResults(query) {// 發(fā)送網(wǎng)絡(luò)請求const results = await fetch(`/api/search?query=${query}`);this.searchResults = await results.json();}}
  };
  

  ?
  • 在這個例子中，當(dāng)?searchText?的值發(fā)生變化時，會調(diào)用?fetchSearchResults?方法發(fā)送網(wǎng)絡(luò)請求并更新?searchResults?的值。

• 深度監(jiān)聽：

  • 當(dāng)要觀察的數(shù)據(jù)是一個對象或數(shù)組時，默認(rèn)情況下，watch?只會觀察到對象或數(shù)組的引用是否發(fā)生變化，而不會觀察對象或數(shù)組內(nèi)部元素的變化。如果需要深度觀察對象或數(shù)組內(nèi)部元素的變化，可以使用?deep: true。
  • 在這個例子中，使用?deep: true?對?user?對象進行深度觀察，當(dāng)?user?對象內(nèi)部的?name?或?age?發(fā)生變化時，handler?函數(shù)會被調(diào)用。

  ?

  export default {data() {return {user: {name: '',age: 0}};},watch: {user: {handler(newValue, oldValue) {console.log('user 對象發(fā)生了變化');},deep: true}}
  };
  

• 立即執(zhí)行：

  • 有時你可能希望在組件創(chuàng)建時就立即執(zhí)行?watch?的回調(diào)函數(shù)，可以使用?immediate: true。
  • 這個例子中，使用?immediate: true，會在組件創(chuàng)建時立即執(zhí)行?handler?函數(shù)，打印出?count?的初始值。

  export default {data() {return {count: 0};},watch: {count: {handler(newValue) {console.log('count 的值為', newValue);},immediate: true}}
  };
  

  computed和watch的區(qū)別：
• computed：
• 主要用于計算屬性，根據(jù)依賴的數(shù)據(jù)自動計算出新的值。
• 計算屬性是基于它們的依賴進行緩存的，只有依賴的數(shù)據(jù)發(fā)生變化時才會重新計算。
• 適合于根據(jù)其他數(shù)據(jù)計算出一個新的值，例如根據(jù)?firstName?和?lastName?計算出?fullName。
• watch：
  • 主要用于觀察數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作。
  • 更側(cè)重于執(zhí)行一些異步或復(fù)雜的邏輯，例如發(fā)送網(wǎng)絡(luò)請求、修改其他數(shù)據(jù)等。