快捷導(dǎo)航

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

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

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

一、引言

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

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

watch 是 Vue 3 中用于觀察和響應(yīng)數(shù)據(jù)變化的機(jī)制之一。你可以使用 watch 來監(jiān)聽單個(gè)數(shù)據(jù)源的變化，并在數(shù)據(jù)變化時(shí)執(zhí)行相應(yīng)的回調(diào)函數(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)聽多個(gè)屬性

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) => {  
    // 當(dāng) state 中的任何屬性發(fā)生變化時(shí)觸發(fā)  
  },  
  { deep: true }  
);

三、計(jì)算屬性 (computed)

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

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)聽多個(gè)屬性

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

3. 緩存機(jī)制

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

四、區(qū)別總結(jié)

用途：watch 主要用于觀察和響應(yīng)數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作，而 computed 主要用于根據(jù)已有的數(shù)據(jù)進(jìn)行計(jì)算并返回一個(gè)新的值。
觸發(fā)時(shí)機(jī)：watch 是在數(shù)據(jù)變化時(shí)觸發(fā)回調(diào)函數(shù)，而 computed 是在訪問其值時(shí)進(jìn)行計(jì)算（如果依賴的數(shù)據(jù)發(fā)生變化）。
緩存：computed 具有緩存機(jī)制，只有當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算，而 watch 沒有緩存機(jī)制。
性能：對(duì)于需要頻繁訪問的計(jì)算屬性，computed 通常比 watch 更高效，因?yàn)樗梢员苊獠槐匾闹貜?fù)計(jì)算。

五、結(jié)語

在 Vue 3 中，watch 和 computed 都是非常重要的工具，它們可以幫助你更好地觀察和響應(yīng)數(shù)據(jù)的變化。選擇使用哪種機(jī)制取決于你的具體需求和場(chǎng)景。希望本文能夠幫助你更好地理解和使用 Vue 3 中的 watch 和 computed的區(qū)別。

以上就是Vue3監(jiān)聽屬性與Computed的區(qū)別詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3監(jiān)聽屬性與Computed區(qū)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: