欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中watchEffect高級偵聽器的具體使用

 更新時間：2024年01月21日 11:54:17   作者：Unique·Blue  
Vue3中新增了一種特殊的監(jiān)聽器watchEffect,本文主要介紹了Vue3中watchEffect高級偵聽器的具體使用,具有一定的參考價值,感興趣的可以了解一下

示例均采用 <script setup>，且包含 typescript 的基礎用法

前言

Vue3 中新增了一種特殊的監(jiān)聽器 watchEffect，它的類型是：

function watchEffect(
  effect: (onCleanup: OnCleanup) => void,
  options?: WatchEffectOptions
): StopHandle

下面通過實例來理解下它的用法

一、簡單使用

  • 第一個參數(shù)就是要運行的 副作用函數(shù) effect
  • 函數(shù)內 用到哪些數(shù)據(jù) 才會 監(jiān)聽哪些數(shù)據(jù)
  • 且會 立刻執(zhí)行一次（immediate）
<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />

import { ref, watchEffect } from "vue";

const message1 = ref<string>("飛機");
const message2 = ref<string>("火車");

watchEffect(() => {
  console.log("message1========>,", message1);
  // 不使用 message2 就不會監(jiān)聽 message2
  // console.log("message2========>,", message2);
});

二、副作用 effect 的參數(shù)

  • effect 的參數(shù) 也是一個 函數(shù)，用來 注冊清理回調。
  • 清理回調 會在 該副作用下一次執(zhí)行前被調用，可以用來清理無效的副作用，例如等待中的異步請求
<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />

import { ref, watchEffect } from "vue";

const message1 = ref<string>("飛機");
const message2 = ref<string>("火車");

watchEffect((onCleanup) => {
  console.log("message11111========>,", message1);
  console.log("message22222========>,", message2);

  onCleanup(() => {
    console.log("onCleanup —————— 下一次運行之前要做的事");
  });
});

頁面刷新，首次打?。?/h3>

在這里插入圖片描述

更改輸入框的值，再次打印：

在這里插入圖片描述

三、watchEffect 返回值

  • 返回值是一個用來 停止偵聽器 的函數(shù)，調用后不再偵聽
  • 需要注意的是：停止時，不影響最后一次 onCleanup 的執(zhí)行
<input type="text" v-model="message1" />
<br />
<input type="text" v-model="message2" />
<br />
<button @click="stopWatch">停止watchEffect</button>

const stop = watchEffect((onCleanup) => {
  console.log("message11111========>,", message1);
  console.log("message22222========>,", message2);

  onCleanup(() => {
    console.log("onCleanup —————— 下一次運行之前要做的事");
  });
});

const stopWatch = () => {
  stop();
};

頁面刷新，首次打?。?/h3>

在這里插入圖片描述

更改輸入框的值，再次打?。?/h3>

點擊按鈕 停止偵聽，再次打?。?/h3>

四、options配置

watchEffect 的第二個參數(shù)是配置項：

  • flush：watch 的執(zhí)行順序
    • pre | post | sync ，默認：pre，具體含義可以看上一篇 watch 中的解釋
    • 一般需要在 dom 更新之后再獲取的情況，可以設置為 post
  • onTrack 用于開發(fā)環(huán)境調試
  • onTrigger 用于開發(fā)環(huán)境調試
<input id="ipt" v-model="iptVal" />

const iptVal = ref<string>("aa");

watchEffect(
  () => {
    // 測試 flush
    const spanEle = document.getElementById("ipt");
    // flush = pre 時，打印 null; flush = post 時，打印節(jié)點
    console.log("spanEle========>,", spanEle); 

    // 修改 iptVal 測試 onTrack、onTrigger
    console.log("iptVal============>", iptVal.value);
  },
  {
    flush: "post",
   	// 收集依賴時觸發(fā)
    onTrack: () => {
      debugger;
    },
    // 更新時觸發(fā)
    onTrigger: () => {
      debugger;
    },
  }
);

五、周邊 api

  • watchPostEffect()：watchEffect() 使用 flush: 'post' 選項時的別名
  • watchSyncEffect()：watchEffect() 使用 flush: 'sync' 選項時的別名

到此這篇關于Vue3中watchEffect高級偵聽器的具體使用的文章就介紹到這了,更多相關Vue3 watchEffect高級偵聽器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！ 

相關文章

  • vue3中setup語法糖下通用的分頁插件實例詳解

    vue3中setup語法糖下通用的分頁插件實例詳解

    這篇文章主要介紹了vue3中setup語法糖下通用的分頁插件,實例代碼介紹了自定義分頁插件：PagePlugin.vue，文中提到了vue3中setup語法糖下父子組件之間的通信，需要的朋友可以參考下
    2022-10-10
  • 在vue項目中如何獲取視頻的時長

    在vue項目中如何獲取視頻的時長

    這篇文章主要介紹了在vue項目中如何獲取視頻的時長，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue的table表格組件的封裝方式

    vue的table表格組件的封裝方式

    這篇文章主要介紹了vue的table表格組件的封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • vue增刪改查的簡單操作

    vue增刪改查的簡單操作

    這篇文章主要為大家詳細介紹了vue增刪改查的簡單操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • vue路由傳參及獲取參數(shù)的方式總結

    vue路由傳參及獲取參數(shù)的方式總結

    這篇文章主要介紹了vue路由傳參及獲取參數(shù)的方式總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-05-05
  • vue打包的時候自動將px轉成rem的操作方法

    vue打包的時候自動將px轉成rem的操作方法

    這篇文章主要介紹了vue打包的時候自動將px轉成rem的操作方法,需要的朋友可以參考下
    2018-06-06
  • vue-element-admin?登陸及目錄權限控制的實現(xiàn)

    vue-element-admin?登陸及目錄權限控制的實現(xiàn)

    本文主要介紹了vue-element-admin?登陸及目錄權限控制的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • 利用Vue實現(xiàn)簡易播放器的完整代碼

    利用Vue實現(xiàn)簡易播放器的完整代碼

    這篇文章主要給大家介紹了關于如何利用Vue實現(xiàn)簡易播放器的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • vue2.x版詳解computed和watch的使用

    vue2.x版詳解computed和watch的使用

    這篇文章主要介紹了vue2.x版詳解computed和watch的使用，文章在基于vue框架的前端項目開發(fā)過程中，只要涉及到稍微復雜一點的業(yè)務，我們都會用到computed計算屬性這個鉤子函數(shù)，可以用于一些狀態(tài)的結合處理和緩存的操作
    2022-07-07
  • Vue雙向綁定詳解

    Vue雙向綁定詳解

    這篇文章主要介紹了Vue 實現(xiàn)雙向綁定的四種方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能夠給你帶來幫助
    2021-11-11

最新評論