Vue3監(jiān)聽屬性與Computed的區(qū)別詳解

更新時間：2024年02月19日 09:55:25 作者：戛然而止ro

在 Vue 3 中,watch 和 computed 都是非常重要的概念,它們都可以用于觀察和響應數(shù)據(jù)的變化,但在使用場景和原理上存在明顯的區(qū)別,本文將詳細解析 Vue 3 中監(jiān)聽屬性 (watch) 和計算屬性 (computed) 的區(qū)別,需要的朋友可以參考下

一、引言

在 Vue 3 中，watch 和 computed 都是非常重要的概念，它們都可以用于觀察和響應數(shù)據(jù)的變化，但在使用場景和原理上存在明顯的區(qū)別。本文將詳細解析 Vue 3 中監(jiān)聽屬性 (watch) 和計算屬性 (computed) 的區(qū)別，幫助你更好地理解它們的用法。

二、監(jiān)聽屬性 (watch)

watch 是 Vue 3 中用于觀察和響應數(shù)據(jù)變化的機制之一。你可以使用 watch 來監(jiān)聽單個數(shù)據(jù)源的變化，并在數(shù)據(jù)變化時執(zhí)行相應的回調函數(shù)。

1. 基本用法

import { ref, watch } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    watch(count, (newValue, oldValue) => {  
      console.log(`Count changed from ${oldValue} to ${newValue}`);  
    });  
  
    return {  
      count  
    };  
  }  
};

2. 監(jiān)聽多個屬性

import { reactive, watch } from 'vue';  
  
export default {  
  setup() {  
    const state = reactive({  
      count: 23,  
      name: 'Jiaranerzhi'  
    });  
  
    watch(  
      () => [state.count, state.name],  
      ([newCount, newName], [oldCount, oldName]) => {  
        console.log(`Count changed from ${oldCount} to ${newCount}`);  
        console.log(`Name changed from ${oldName} to ${newName}`);  
      }  
    );  
  
    return {  
      ...state  
    };  
  }  
};

3. 深度監(jiān)聽

watch(  
  state,  
  (newValue, oldValue) => {  
    // 當 state 中的任何屬性發(fā)生變化時觸發(fā)  
  },  
  { deep: true }  
);

三、計算屬性 (computed)

computed 是 Vue 3 中另一種用于觀察和響應數(shù)據(jù)變化的機制。與 watch 不同，computed 主要用于根據(jù)已有的數(shù)據(jù)進行計算并返回一個新的值，這個新的值會被 Vue 緩存，只有當依賴的數(shù)據(jù)發(fā)生變化時才會重新計算。

1. 基本用法

import { ref, computed } from 'vue';  
  
export default {  
  setup() {  
    const firstName = ref('Alen');  
    const lastName = ref('Jia');  
  
    const fullName = computed(() => {  
      return `${firstName.value} ${lastName.value}`;  
    });  
  
    return {  
      firstName,  
      lastName,  
      fullName  
    };  
  }  
};

2. 監(jiān)聽多個屬性

computed 會自動追蹤其依賴的數(shù)據(jù)，并根據(jù)這些數(shù)據(jù)的變化重新計算。因此，你可以很方便地在 computed 函數(shù)中使用多個數(shù)據(jù)屬性。

3. 緩存機制

computed 的一個重要特點是它的緩存機制。只有當其依賴的數(shù)據(jù)發(fā)生變化時，computed 屬性才會重新計算。這可以提高性能，特別是在進行復雜計算或需要頻繁訪問計算屬性時。

四、區(qū)別總結

用途：watch 主要用于觀察和響應數(shù)據(jù)的變化并執(zhí)行相應的操作，而 computed 主要用于根據(jù)已有的數(shù)據(jù)進行計算并返回一個新的值。
觸發(fā)時機：watch 是在數(shù)據(jù)變化時觸發(fā)回調函數(shù)，而 computed 是在訪問其值時進行計算（如果依賴的數(shù)據(jù)發(fā)生變化）。
緩存：computed 具有緩存機制，只有當依賴的數(shù)據(jù)發(fā)生變化時才會重新計算，而 watch 沒有緩存機制。
性能：對于需要頻繁訪問的計算屬性，computed 通常比 watch 更高效，因為它可以避免不必要的重復計算。