前言

前段時間看了一些直播關(guān)于vue3中的watch的使用，有許多看起來比較難以理解東西，今天就舉幾個例子看看兄弟們watch的實際掌握情況

二、案例

tips 以下除開特殊說明，修改的內(nèi)容都是setTimeout里面的賦值操作

1.案例1

<script setup lang="ts">
import { watch, ref } from "vue";
let obj: any = ref({ a: 1, b: { c: 1 } });
watch(
  obj,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  { deep: true }
);
setTimeout(() => {
 obj = { a: 2 }
  console.log("修改數(shù)據(jù)");
}, 1000);
</script>

<template></template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

這一種相信大家可能比較清楚，肯定是不會觸發(fā)watch的執(zhí)行

2.案例2

修改賦值操作為 obj.value = { a: 2 } 結(jié)果是會觸發(fā)watch的執(zhí)行

為什么呢：因為在源碼當(dāng)中watch如果第一個參數(shù)是ref，那么源碼會將其轉(zhuǎn)換成
getter = () => source.value; 即watch判斷的是ref.value有沒有發(fā)生變化，很明顯，這個案例是發(fā)生了變化，所以watch會執(zhí)行

3.案例3

修改賦值操作為 obj.value.a = 2 這個會不會呢

可能有的小伙伴看到案例2的解釋覺得不會，但是錯誤，因為這里有一個配置項：deep:true，

當(dāng)開啟這個選項的時候，就會遞歸收集，那么相當(dāng)于obj.value的對象也被監(jiān)聽了，所以會觸發(fā)

但是當(dāng)你把deep:true改成false或者不做配置就不會

4.案例4

 watch(
   () => obj,
   (newVal, oldVal) => {
     console.log(newVal, oldVal);
   }
 );

只改變地第一個參數(shù)的傳遞方式，其他不變，當(dāng)然deep這個參數(shù)取消了，那么以上的幾種方式會觸發(fā)執(zhí)行嗎

很遺憾告訴大家，一個都不會觸發(fā)

這里就涉及到watch第一個參數(shù)傳參的方式了：

如果當(dāng)傳的是一個函數(shù)，那么vue不會對這個函數(shù)做處理，監(jiān)聽的也是這個函數(shù)的返回值，相當(dāng)于你監(jiān)聽的是這個obj，而不是obj.value，而響應(yīng)式攔截是需要監(jiān)聽數(shù)據(jù)，即在這里如果想實現(xiàn)修改變化，需要監(jiān)聽的是obj.value

但是當(dāng)deep設(shè)置為true時，結(jié)果又不一樣了

除了obj = { a: 2 } 不會重新觸發(fā)，其他都會觸發(fā)，是因為deep:true會遞歸收集依賴，所以修改都會變化

5.案例5

watch(
  obj.value,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },

);

這里又不一樣了，第一個參數(shù)是obj.value

那么obj.value.a = 2會不會觸發(fā)執(zhí)行呢？

答案是會！

解釋一下：此時第一個參數(shù)obj.value，其實就相當(dāng)于第一個參數(shù)是reactive，你修改reactive的屬性的值，肯定是會觸發(fā)重新執(zhí)行的

6.案例6

修改賦值為obj = { a: 2 } 答案肯定是不會重新觸發(fā)的，對象的地址都發(fā)生了變化，不再是原來那個對象了，當(dāng)時你設(shè)置obj.value = {a:2} 是一樣的

7. 案例7

修改obj.b.c = 2 呢，會重新觸發(fā)，因為watch監(jiān)聽reactive默認deep：true,默認進行深度監(jiān)聽

總結(jié)

以上就是關(guān)于watch使用中需要注意的點；說實話，如果沒有看過源碼的話，這些問題很容易對開發(fā)產(chǎn)生影響，所以大家如果沒事的時候可以去嘗試閱讀一下源碼

到此這篇關(guān)于vue3中的watch使用的文章就介紹到這了,更多相關(guān)vue3中watch使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論