??前言

計(jì)算屬性 computed 和偵聽器 watch 都是 Vue.js 框架中用來響應(yīng)式更新視圖的重要概念。因此無論是在哪個(gè)版本，它們都是不可缺少的概念，這篇文章就不過多詳細(xì)介紹計(jì)算屬性和偵聽器的概念和理論了，接下來主要談?wù)?Vue2 和 Vue3 中計(jì)算屬性和偵聽器的語法變化和異同。

??計(jì)算屬性

計(jì)算屬性：計(jì)算屬性實(shí)際上是一種計(jì)算一個(gè)值并將結(jié)果緩存起來的方法。當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí)，緩存會(huì)被重新計(jì)算。計(jì)算屬性相比直接在模板表達(dá)式中調(diào)用方法或者直接使用表達(dá)式計(jì)算的好處在于其可以緩存結(jié)果，減少不必要的計(jì)算，提高性能。

Vue3 中的計(jì)算屬性和 Vue2 中的計(jì)算屬性基本相同，不過在語法上有所不同。在 Vue3 中，我們可以使用 computed 函數(shù)來定義計(jì)算屬性，它接受一個(gè)函數(shù)作為參數(shù)，并返回一個(gè) ref 對象，這個(gè) ref 對象會(huì)自動(dòng)追蹤計(jì)算屬性使用到的數(shù)據(jù)，并且在這些數(shù)據(jù)發(fā)生變化時(shí)重新計(jì)算計(jì)算屬性的值。

上面說到計(jì)算屬性是以函數(shù)的形式出現(xiàn)在組件的 computed 選項(xiàng)中，在新版的 Vue 3.x 的 setup 語法糖里，可以計(jì)算屬性的具體實(shí)現(xiàn)函數(shù)傳遞給 computed() 方法，然后賦值給一個(gè)變量。

??接下舉個(gè)簡單的例子。

<template>
  <p>原始count:{{ count }}</p>
  <p>計(jì)算屬性count:{{ doubleCount }}</p>
  <p>JavaScript表達(dá)式的count:{{ count * 2 }}</p>
</template>

<script setup>
import { computed, ref } from "vue";
const count = ref(2);
const doubleCount = computed(() => count.value * 2);
</script>

??偵聽器

偵聽器：偵聽器則通過監(jiān)聽數(shù)據(jù)變化來觸發(fā)回調(diào)函數(shù)的執(zhí)行。偵聽器適用于當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)使用，比如發(fā)送 Ajax 請求或進(jìn)行復(fù)雜的計(jì)算。

Vue3 中的偵聽器與 Vue2 中的 watch API 不同，Vue3 中可以使用新的 watchEffect 函數(shù)來監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，同時(shí)也可以使用 watch 監(jiān)聽指定的數(shù)據(jù)。

1?? watchEffect 函數(shù)接受一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)中可以訪問任何響應(yīng)式數(shù)據(jù)，當(dāng)這些數(shù)據(jù)變化時(shí)，回調(diào)函數(shù)都會(huì)被重新執(zhí)行。

2?? 如果要監(jiān)聽指定的數(shù)據(jù)，可以使用 watch 函數(shù)。它接受兩個(gè)參數(shù)：要監(jiān)聽的數(shù)據(jù)和回調(diào)函數(shù)，當(dāng)監(jiān)聽的數(shù)據(jù)發(fā)生變化時(shí)，回調(diào)函數(shù)會(huì)被執(zhí)行。

??接下舉個(gè)簡單的例子。

<template>
  <input type="number" v-model="num" />
  <p>result為:{{ result }}</p>
</template>

<script setup>
import { ref, watch, watchEffect } from "vue";
const num = ref(0);
const result = ref(0);
watch(
  () => num.value,
  (newValue, oldValue) => {
    console.log("舊值為：", oldValue, "新值為：", newValue);
    return (result.value = num.value * num.value);
  }
);
watchEffect(() => {
  console.log(`num: ${num.value}`);
});
</script>

??最后

計(jì)算屬性 computed 和偵聽器 watch 都是實(shí)現(xiàn)響應(yīng)式編程的重要工具，可以方便地處理復(fù)雜的業(yè)務(wù)數(shù)據(jù)變化場景?？偟膩碚f，Vue.js 3.x 中的計(jì)算屬性和偵聽器與 2.x 版本還是非常相似，都是用來處理響應(yīng)式數(shù)據(jù)變化的關(guān)鍵工具。不同之處在于 3.x 版本中的語法略微有所不同，并且需要注意一些細(xì)節(jié)，如嵌套對象的偵聽。
文章來源地址http://www.zghlxwxcb.cn/news/detail-425337.html

到了這里，關(guān)于淺談在 Vue2 和 Vue3 中計(jì)算屬性和偵聽器的一些變化的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！