??博主：鍋蓋噠
??文章核心：vue3 computed 和 watch 的差異
目錄
前言
用法
computed
watch
代碼
理解
高質(zhì)量的使用
Vue.js作為一種現(xiàn)代化的前端框架，提供了豐富的特性來幫助開發(fā)者構(gòu)建高效和響應(yīng)式的用戶界面。在這其中，computed 和 watch 是兩個非常重要的選項(xiàng)，它們都用于處理數(shù)據(jù)的變化，但它們的用法、原理以及適用的場景都有很大的差異。接下來，我們將詳細(xì)介紹這兩者的區(qū)別，以及如何在Vue中高效地使用它們。
前言
在Vue應(yīng)用中，數(shù)據(jù)的響應(yīng)式變化是其核心特性之一。computed 和 watch 都提供了一種機(jī)制來觀察和響應(yīng)Vue實(shí)例上數(shù)據(jù)的變化。然而，它們的使用方式、原理以及適用的場景都有明顯的差異。computed 通常用于計(jì)算派生狀態(tài)，而 watch 更適用于觀察數(shù)據(jù)的變化并執(zhí)行異步操作或較大的計(jì)算。理解它們之間的區(qū)別，可以幫助我們更合理地設(shè)計(jì)我們的應(yīng)用，使其更加高效和易于維護(hù)。
用法
computed
computed 是基于它們的依賴進(jìn)行緩存的。只有在相關(guān)依賴發(fā)生改變時它們才會重新求值。這意味著只要依賴保持不變，多次訪問 computed 屬性將立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。
computed 的常見用法是在模板內(nèi)進(jìn)行復(fù)雜計(jì)算：
new Vue({
data: {
a: 1,
b: 2
},
computed: {
sum: function () {
return this.a + this.b;
}
}
});
在上面的例子中，sum 是一個計(jì)算屬性，依賴于 data 對象中的 a 和 b。只要 a 或 b 改變，sum 就會自動更新。
watch
watch 提供了一種方式，允許我們執(zhí)行異步操作 (訪問一個API，限制執(zhí)行頻率)，并在我們觀察的數(shù)據(jù)發(fā)生變化時，執(zhí)行更多的操作。
new Vue({
data: {
question: '',
answer: 'Questions usually contain a question mark. ;)'
},
watch: {
// 如果 `question` 發(fā)生改變，這個函數(shù)就會運(yùn)行
question: function (newQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;)'
return
}
this.answer = 'Thinking...'
// 略
},
// 這是我們?yōu)橛脩敉Ｖ馆斎氲却暮撩霐?shù)
500
)
}
})
在這個例子中，我們使用 watch 選項(xiàng)來觀察 question 數(shù)據(jù)的變化，并執(zhí)行一些異步操作或者較大計(jì)算。
代碼
下面是一個具體的例子，展示了 computed 和 watch 的用法：
<template>
<div>
<input v-model="number">
<p>原始數(shù)字：{{ number }}</p>
<p>數(shù)字的平方（computed）：{{ squaredNumber }}</p>
<button @click="findSquareRoot">計(jì)算數(shù)字的平方根（watch）</button>
<p>數(shù)字的平方根（watch）：{{ squareRoot }}</p>
</div>
</template>
<script>
export default {
data() {
return {
number: 0,
squareRoot: 0
};
},
computed: {
squaredNumber() {
return this.number * this.number;
}
},
watch: {
number(newValue) {
this.findSquareRoot();
}
},
methods: {
findSquareRoot() {
this.squareRoot = Math.sqrt(this.number);
}
}
}
</script>
在這個例子中，我們有一個文本輸入框，用戶可以輸入數(shù)字。我們使用 computed 屬性來計(jì)算這個數(shù)字的平方，并使用 watch 來計(jì)算這個數(shù)字的平方根。
理解
computed 和 watch 的核心區(qū)別在于它們?nèi)绾胃櫼蕾嚭陀|發(fā)更新。
-
computed更適合用在模板中需要進(jìn)行復(fù)雜計(jì)算的場景，它會緩存計(jì)算結(jié)果，只有當(dāng)其依賴發(fā)生變化時才會重新計(jì)算。這使得computed非常高效。 -
watch則更適用于觀察某個值的變化并執(zhí)行異步操作或開銷較大的操作。它不會緩存結(jié)果，每次觸發(fā)都會執(zhí)行指定的回調(diào)函數(shù)。
高質(zhì)量的使用
為了確保我們高效地使用 computed 和 watch，我們需要遵循一些最佳實(shí)踐：
-
合理選擇：根據(jù)具體場景合理選擇使用
computed還是watch。如果你需要基于某個狀態(tài)的派生狀態(tài)，使用computed；如果你需要在某個狀態(tài)變化時執(zhí)行異步或開銷較大的操作，使用watch。 -
避免復(fù)雜的
computed屬性：雖然computed屬性是緩存的，但是不代表你可以在computed屬性中執(zhí)行非常復(fù)雜的操作。過于復(fù)雜的computed屬性會使得組件的可維護(hù)性變差。 -
合理利用
watch的配置項(xiàng)：watch提供了一些配置項(xiàng)，比如deep和immediate。deep允許你在觀察對象時深度觀察其內(nèi)部的變化，而immediate允許你在添加觀察者時立即觸發(fā)回調(diào)。
通過遵循這些最佳實(shí)踐，我們可以確保我們的Vue應(yīng)用運(yùn)行得更加順暢，并且更易于維護(hù)。文章來源：http://www.zghlxwxcb.cn/news/detail-719986.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-719986.html
到了這里，關(guān)于vue3 computed 和 watch 的差異的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
