如何停止監(jiān)聽呢？

下面分兩種情況進(jìn)行講解

情況一

情況一是使用回調(diào)函數(shù)，停止事件監(jiān)聽

<!-- 這個界面就是花上的葉子，要在App中引入，把葉子裝在枝干上 -->
 
<template>
    <div class="person">
        <h1>【情況一:監(jiān)視ref定義的基本類型數(shù)據(jù)】</h1>
        <h2 @click="changeSum">當(dāng)前求和為:{{ sum }}</h2>
    </div>
</template>
 
<script lang="ts" setup name="Person">
// 導(dǎo)入
import { ref, watch } from 'vue'
 
// 數(shù)據(jù)
let sum = ref(0)
 
// 方法
function changeSum() {
    sum.value++
}
 
// 監(jiān)視
const stopWatch = watch(sum, (newValue, oldValue) => {
    console.log(`sum的值發(fā)生了改變, 新:${newValue},舊值:${oldValue}`)
    if(newValue > 5) {
        stopWatch()
    }
})
 
 
console.log(stopWatch)
//可以看看打印的結(jié)果，運行界面之后按F12，打開控制臺可進(jìn)行查看
//
 
 
</script>
 
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
}
</style>

內(nèi)容講解

上面給sum值添加了一個監(jiān)聽，那如何停止監(jiān)聽呢？

就是給watch執(zhí)行了一個回調(diào)函數(shù)

在這個代碼中，開始時 watch 對 count 進(jìn)行監(jiān)聽，每次 count 的值改變，回調(diào)函數(shù)就會執(zhí)行并打印變化信息。但當(dāng) count 的值達(dá)到 5 或者更大時，stopWatch 函數(shù)被調(diào)用，此時 Vue 內(nèi)部會依據(jù)這個調(diào)用執(zhí)行相應(yīng)的清理工作，解除對 count 后續(xù)變化的監(jiān)聽關(guān)系，之后哪怕 count 的值再怎么改變，也不會執(zhí)行這個 watch 對應(yīng)的回調(diào)函數(shù)了，實現(xiàn)了停止監(jiān)聽的目的。

所以，stopWatch 函數(shù)本質(zhì)上是 Vue 提供的用于手動控制 watch 監(jiān)聽生命周期的一個工具，方便開發(fā)者根據(jù)業(yè)務(wù)邏輯需求靈活決定何時停止對特定數(shù)據(jù)變化的關(guān)注和響應(yīng)

內(nèi)部實現(xiàn)機制

watch 函數(shù)內(nèi)部其實維護(hù)了一套用于觀察和響應(yīng)數(shù)據(jù)變化的邏輯，它會在你傳入要監(jiān)聽的數(shù)據(jù)（比如 ref 定義的響應(yīng)式數(shù)據(jù)或者 reactive 定義的響應(yīng)式對象等）后，通過 Vue 的響應(yīng)式系統(tǒng)來追蹤這些數(shù)據(jù)的變化情況。當(dāng)數(shù)據(jù)發(fā)生變化時，就會觸發(fā)對應(yīng)的回調(diào)函數(shù)執(zhí)行相應(yīng)的操作。

而返回的這個 stopWatch 函數(shù)，實際上是一個關(guān)閉這個特定監(jiān)聽任務(wù)的接口。當(dāng) watch 開始監(jiān)聽時，它會創(chuàng)建一個內(nèi)部的訂閱者對象或者類似的結(jié)構(gòu)（具體是內(nèi)部的實現(xiàn)細(xì)節(jié)，但可以簡單這么理解）來負(fù)責(zé)檢測數(shù)據(jù)變化并觸發(fā)回調(diào)。這個 stopWatch 函數(shù)被調(diào)用時，它會在內(nèi)部執(zhí)行一些清理操作，比如移除與這個監(jiān)聽相關(guān)的事件訂閱、取消對數(shù)據(jù)變化的追蹤關(guān)聯(lián)等，從而使得后續(xù)這個被監(jiān)聽的數(shù)據(jù)即便再發(fā)生變化，也不會再觸發(fā)對應(yīng)的回調(diào)函數(shù)了，也就是實現(xiàn)了停止監(jiān)聽的效果。

類比理解

可以把 watch 的監(jiān)聽過程想象成你訂閱了一份報紙（數(shù)據(jù)變化就是有新的消息更新），每天送報員（Vue 的響應(yīng)式系統(tǒng)）會查看報紙有沒有新內(nèi)容（數(shù)據(jù)有沒有變化），如果有就會給你送過來（觸發(fā)回調(diào)函數(shù)）。而 stopWatch 函數(shù)就好比你打電話給報社說 “我不想再訂閱了”（調(diào)用 stopWatch），報社接到通知后（內(nèi)部進(jìn)行清理操作），就不會再安排送報員給你送報紙了（不再追蹤數(shù)據(jù)變化觸發(fā)回調(diào)），你也就不會再接收到后續(xù)的報紙（不會再響應(yīng)數(shù)據(jù)變化了）。

情況二

情況二是調(diào)用函數(shù)進(jìn)行暫停，恢復(fù)和停止時間監(jiān)聽

<template>
    <div class="Test">
      <h1>Watch示例 - 暫停、恢復(fù)與停止監(jiān)聽演示</h1>
      <p>當(dāng)前計數(shù): {{ count }}</p>
      <button @click="increment">增加計數(shù)</button>
      <button @click="decrement">減少計數(shù)</button>
      <button @click="pauseWatch">暫停監(jiān)聽</button>
      <button @click="resumeWatch">恢復(fù)監(jiān)聽</button>
      <button @click="stopWatch">停止監(jiān)聽</button>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  
  // 創(chuàng)建響應(yīng)式數(shù)據(jù)，用于存儲計數(shù)器的值，初始值為0
  const count = ref(0);
  
  // 用于存儲watch實例，后續(xù)通過它來調(diào)用pause、resume、stop方法
  let watchInstance;
  
  // 定義watch監(jiān)聽計數(shù)變化，當(dāng)計數(shù)變化時打印相關(guān)信息
  watchInstance = watch(count, (newValue, oldValue) => {
    console.log(`計數(shù)從 ${oldValue} 變?yōu)?${newValue}`);
  });
  
  // 增加計數(shù)的方法
  const increment = () => {
    count.value++;
  };
  
  // 減少計數(shù)的方法
  const decrement = () => {
    count.value--;
  };
  
  // 暫停監(jiān)聽的方法
  const pauseWatch = () => {
    watchInstance.pause();
    console.log('已暫停對計數(shù)變化的監(jiān)聽');
  };
  
  // 恢復(fù)監(jiān)聽的方法
  const resumeWatch = () => {
    watchInstance.resume();
    console.log('已恢復(fù)對計數(shù)變化的監(jiān)聽');
  };
  
  // 停止監(jiān)聽的方法
  const stopWatch = () => {
    watchInstance.stop();
    console.log('已停止對計數(shù)變化的監(jiān)聽，后續(xù)計數(shù)變化將不再觸發(fā)監(jiān)聽回調(diào)');
  };
  </script>
  
  <style scoped>
  .Test {
    text-align: center;
    padding: 20px;
    background-color: #faebeb;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  button {
    margin: 5px 10px;
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
  }
  </style>

模板部分（<template>）

展示了一個簡單的頁面結(jié)構(gòu)，包含顯示當(dāng)前計數(shù)的文本、用于增加計數(shù)和減少計數(shù)的按鈕，以及分別對應(yīng)暫停監(jiān)聽、恢復(fù)監(jiān)聽和停止監(jiān)聽的按鈕，方便用戶操作并觀察不同操作對監(jiān)聽的影響。

腳本部分（<script setup>）

響應(yīng)式數(shù)據(jù)與watch監(jiān)聽初始化：

通過 ref 創(chuàng)建了 count 這個響應(yīng)式數(shù)據(jù)，初始值設(shè)為 0，用于模擬計數(shù)器的值。

使用 watch 監(jiān)聽 count 的變化，每當(dāng) count 的值發(fā)生改變，回調(diào)函數(shù)就會執(zhí)行并在控制臺打印出計數(shù)變化的前后值，如 計數(shù)從 1 變?yōu)?2 這樣的信息，同時將 watch 實例賦值給 watchInstance 變量，以便后續(xù)調(diào)用其相關(guān)方法。

操作計數(shù)的方法：

分別定義了 increment 和 decrement 方法，用于增加和減少 count 的值，通過點擊頁面上對應(yīng)的按鈕可以改變 count 的值，從而觸發(fā) watch 的監(jiān)聽回調(diào)（在未暫停、停止監(jiān)聽的情況下）。

暫停、恢復(fù)和停止監(jiān)聽的方法：

pauseWatch 方法：調(diào)用 watchInstance.pause() 來暫停對 count 變化的監(jiān)聽，并且在控制臺打印提示信息告知用戶已暫停監(jiān)聽，此后再改變 count 的值，watch 的回調(diào)函數(shù)不會被觸發(fā)執(zhí)行，直到調(diào)用 resumeWatch 方法恢復(fù)監(jiān)聽。

resumeWatch 方法：調(diào)用 watchInstance.resume() 來恢復(fù)之前被暫停的對 count 變化的監(jiān)聽，同時在控制臺打印相應(yīng)提示信息，恢復(fù)后，若 count 的值再次改變，watch 的回調(diào)函數(shù)又會正常執(zhí)行了。

stopWatch 方法：調(diào)用 watchInstance.stop() 徹底停止對 count 變化的監(jiān)聽，打印提示信息說明后續(xù)計數(shù)變化將不再觸發(fā)監(jiān)聽回調(diào)，意味著之后無論怎么改變 count 的值，watch 對應(yīng)的回調(diào)函數(shù)都不會再執(zhí)行了，監(jiān)聽關(guān)系被完全解除。

這個就是console.log()的watchStop

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

最新評論