難以區別
計算屬性和監聽器之間的區別是，計算屬性有“臨時快照”機制，而監聽器沒有，監聽器能做的事情，計算屬性也可以做，所以，這一節標題取的就是“難以區別”，但是深入理解的話還是能看出不一樣的，也就決定了它們之間的適用場景，
以下都是個人觀點，計算屬性的作用就是計算然后回傳值，簡化模板取值等；監聽器更多的意義是監測一個回應式資料的變化從而改變其他的狀態，也可以這樣理解，計算屬性就好像是普通工人在作業，并生產東西；監聽器更像是領導在指揮工人怎么做，或如何做，
在討論計算屬性和監聽器的區別之前，如果你對計算屬性有明確的認知，下文理解起來應該不困難，否則建議你閱讀我寫的前置文章——《Vue 計算屬性與普通的函式有什么區別？》，
計算屬性
廢話不多說，直接上代碼，計算某總價：
let price = ref(1);
let num = ref(1);
const total = computed(() => {
return price.value * num.value;
});
<div >
Total: {{ total }}
<div>
<span>Price: </span>
<input v-model="price" />
</div>
<div>
<span>Num: </span>
<input v-model="num" />
</div>
</div>
計算屬性計算兩個回應式資料price以及num，當其中一個資料發生變化時，整個計算屬性都將重新執行一次，
我說的是否正確？一驗便知：
監聽器
監聽某商品數量是否發生變化：
let price = ref(1);
let num = ref(1);
let total = ref(0);
watch(num, (newVal, oldVal) => {
total.value = https://www.cnblogs.com/Enziandom/archive/2022/08/25/price.value + newVal;
});
監聽器只監聽回應式資料num，如果發生變化就重新計算并賦值給 result，但是，回應式資料price發生變化，就不能夠讓這個監聽器重新計算，可以說，監聽器只對num負責，而不受其他回應式資料影響，
我說的是否正確？一驗便知：
在輸入價格的時候，監聽器沒有發生任何變化，而當只有數量發生變化的時候，才有了總價，
本節小結
通過上面的代碼可以發現，監聽器是監測回應式資料num是否發生變化才執行后續的操作，監聽器非常具體和精準地知道哪一個被修改了，但是在計算屬性里面你能夠知道嗎？很明顯不可以，雖然說有一個資料被修改了計算屬性也知道，但是不知道具體的，所以，在計算屬性里就不能精準地捕捉，并準對于這一情況做后續的操作，
各自的適用場景
它們之間還有一個區別涉及到性能和開銷，計算屬性不適用于更改間隔時間短的回應式資料計算，而監聽器更加適用，
計算屬性
官方檔案對于計算屬性提到了一個重要的點子——“臨時快照”（計算屬性的快取），每當源狀態發生變化時，就會創建一個新的快照，
有時候創建快照是沒有意義的，對于間隔時間很短的源資料修改，比如輸入框輸入時頁面上的一些變化，輸入第一個字符到第二個字符之間的間隔時間，字符有長有短，每一次都要創建“臨時快照”，這樣是沒有意義的，反而可能增加開銷，
計算屬性除了可以用于復雜的模板取值（普通函式也可以做），還可以計算一次而在頁面上多次使用，
監聽器
因此，上面說到的情況就更加適合用監聽器來做，監聽器不創建“臨時快照”，監聽器更適用于官方檔案說的場景：“我們需要在狀態變化時執行一些‘副作用’：例如更改 DOM，或是根據異步操作的結果去修改另一處的狀態”，
總結
（1）計算屬性適合資料源發生變化間隔長，且頁面使用它的次數多的情況（區別于普通函式）；監聽器適合資料源發生變化間隔短，或有異步操作，或有副作用的情況，
（2）如果想要知道具體哪個回應式資料被修改，然后做后續的操作，就使用監聽器；不關心哪一個，只要是資料被改動，就都重新執行，就使用計算屬性，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502744.html
標籤：其他