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

下面分兩種情況進行講解

情況一

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

<!-- 這個界面就是花上的葉子，要在App中引入，把葉子裝在枝干上 -->
 
<template>
    <div class="person">
        <h1>【情況一:監(jiān)視ref定義的基本類型數(shù)據(jù)】</h1>
        <h2 @click="changeSum">當前求和為:{{ sum }}</h2>
    </div>
</template>
 
<script lang="ts" setup name="Person">
// 導入
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)
//可以看看打印的結果，運行界面之后按F12，打開控制臺可進行查看
//
 
 
</script>
 
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
}
</style>

內容講解

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

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

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

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

內部實現(xiàn)機制

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

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

類比理解

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

情況二

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

<template>
    <div class="Test">
      <h1>Watch示例 - 暫停、恢復與停止監(jiān)聽演示</h1>
      <p>當前計數(shù): {{ count }}</p>
      <button @click="increment">增加計數(shù)</button>
      <button @click="decrement">減少計數(shù)</button>
      <button @click="pauseWatch">暫停監(jiān)聽</button>
      <button @click="resumeWatch">恢復監(jiān)聽</button>
      <button @click="stopWatch">停止監(jiān)聽</button>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  
  // 創(chuàng)建響應式數(shù)據(jù)，用于存儲計數(shù)器的值，初始值為0
  const count = ref(0);
  
  // 用于存儲watch實例，后續(xù)通過它來調用pause、resume、stop方法
  let watchInstance;
  
  // 定義watch監(jiān)聽計數(shù)變化，當計數(shù)變化時打印相關信息
  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)聽');
  };
  
  // 恢復監(jiān)聽的方法
  const resumeWatch = () => {
    watchInstance.resume();
    console.log('已恢復對計數(shù)變化的監(jiān)聽');
  };
  
  // 停止監(jiān)聽的方法
  const stopWatch = () => {
    watchInstance.stop();
    console.log('已停止對計數(shù)變化的監(jiān)聽，后續(xù)計數(shù)變化將不再觸發(fā)監(jiān)聽回調');
  };
  </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>）

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

腳本部分（<script setup>）

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

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

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

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

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

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

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

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

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

這個就是console.log()的watchStop

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

最新評論