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

下面分兩種情況進行講解

情況一

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

<!-- 這個界面就是花上的葉子，要在App中引入，把葉子裝在枝干上 -->
 
<template>
    <div class="person">
        <h1>【情況一:監(jiān)視ref定義的基本類型數據】</h1>
        <h2 @click="changeSum">當前求和為:{{ sum }}</h2>
    </div>
</template>
 
<script lang="ts" setup name="Person">
// 導入
import { ref, watch } from 'vue'
 
// 數據
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í)行了一個回調函數

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

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

內部實現機制

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

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

類比理解

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

情況二

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

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

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

腳本部分（<script setup>）

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

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

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

操作計數的方法：

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

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

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

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

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

這個就是console.log()的watchStop

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

最新評論