前言

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

二、案例

tips 以下除開(kāi)特殊說(shuō)明，修改的內(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>

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

2.案例2

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

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

3.案例3

修改賦值操作為 obj.value.a = 2 這個(gè)會(huì)不會(huì)呢

可能有的小伙伴看到案例2的解釋覺(jué)得不會(huì)，但是錯(cuò)誤，因?yàn)檫@里有一個(gè)配置項(xiàng)：deep:true，

當(dāng)開(kāi)啟這個(gè)選項(xiàng)的時(shí)候，就會(huì)遞歸收集，那么相當(dāng)于obj.value的對(duì)象也被監(jiān)聽(tīng)了，所以會(huì)觸發(fā)

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

4.案例4

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

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

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

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

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

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

除了obj = { a: 2 } 不會(huì)重新觸發(fā)，其他都會(huì)觸發(fā)，是因?yàn)閐eep:true會(huì)遞歸收集依賴(lài)，所以修改都會(huì)變化

5.案例5

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

);

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

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

答案是會(huì)！

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

6.案例6

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

7. 案例7

修改obj.b.c = 2 呢，會(huì)重新觸發(fā)，因?yàn)閣atch監(jiān)聽(tīng)reactive默認(rèn)deep：true,默認(rèn)進(jìn)行深度監(jiān)聽(tīng)

總結(jié)

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

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

最新評(píng)論