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

全面總結(jié)Vue3.0的多種偵聽方式

 更新時間:2021年10月09日 11:02:13   作者:前端老實人  
Vue提供了一種更通用的方式來觀察和響應(yīng)當(dāng)前活動的實例上的數(shù)據(jù)變動:偵聽屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3.0多種偵聽方式的相關(guān)資料,需要的朋友可以參考下

偵聽器

雖然計算屬性在大多數(shù)情況下更合適,但有時也需要一個自定義的偵聽器。這就是為什么 Vue 通過watch選項提供了一個更通用的方法,來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的。

一、wacthEffect

立即執(zhí)行,沒有immediate

偵聽,watchEffect是立即執(zhí)行的,沒有immediate,不需要傳遞偵聽的內(nèi)容,自動會感知代碼依賴,不需要傳參,只需要傳一個回調(diào)函數(shù)不能獲取之前的值

如果需要停用偵聽器,可以回調(diào)這個偵聽器函數(shù)

const stop = watchEffect(()=>{
        // console.log('num:',num.value);
        // console.log('num:',str.value);
      })

二、watch

不會立即執(zhí)行,需要手動開啟immediate

// 指定主要偵聽的值num
      watch(num,(val,oval)=>{
        // val:新值,oval:之前的值
        // console.log(num.value);
        // console.log(val,oval);
      },{//第二個參數(shù)obj immediate,deep
      immediate:true//默認(rèn)就是只有數(shù)據(jù)改變時才會監(jiān)聽,
      // 第一次創(chuàng)建的時候不會執(zhí)行,設(shè)置成true,第一次就會執(zhí)行
      })
  • 偵聽ref的數(shù)據(jù)源
  • 偵聽reactive數(shù)據(jù)源 

1.1第一種方式偵聽

//偵聽state下的id,對象數(shù)據(jù)的變化
      watch(state,(val,oval)=>{
        // console.log('id',val.id,oval);
      },{
        immediate:true,
        deep:true//開啟深度監(jiān)聽,能夠偵聽到對象屬性值的變化
      })

1.2第二種方式偵聽

// 偵聽state.uname
      watch(()=>state.uname,(uname,p)=>{
        //uname新值,p舊值
        console.log(uname,p);
      },{
        immediate:true
      })

1.3偵聽多個數(shù)據(jù)源

//偵聽多個數(shù)據(jù)(id,uname)
    //()=>state.id,相當(dāng)于//object.values(toRefs(state))解構(gòu)了
     const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{
        // id新,oid舊
        console.log('id',id,oid);
        // uname新,oname舊
        console.log('uname',uname,oname);
      })

總結(jié)

到此這篇Vue3.0多種偵聽方式的文章就介紹到這了,更多相關(guān)Vue3.0偵聽方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解vue在項目中使用百度地圖

    詳解vue在項目中使用百度地圖

    這篇文章主要介紹了vue在項目中使用百度地圖,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • 在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表

    在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表

    這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • 詳解如何在vue項目中使用eslint+prettier格式化代碼

    詳解如何在vue項目中使用eslint+prettier格式化代碼

    在開發(fā)中我們需要一種能夠統(tǒng)一團隊代碼風(fēng)格的工具,作為強制性的規(guī)范,統(tǒng)一整個項目的代碼風(fēng)格,這篇文章主要介紹了詳解如何在vue項目中使用eslint+prettier格式化代碼,需要的朋友可以參考下
    2018-11-11
  • Vue源碼解讀之Component組件注冊的實現(xiàn)

    Vue源碼解讀之Component組件注冊的實現(xiàn)

    這篇文章主要介紹了Vue源碼解讀之Component組件注冊的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue中radio根據(jù)動態(tài)值綁定checked無效的解決

    vue中radio根據(jù)動態(tài)值綁定checked無效的解決

    這篇文章主要介紹了vue中radio根據(jù)動態(tài)值綁定checked無效的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • vue項目優(yōu)雅實現(xiàn)自動引入組件的方法詳解

    vue項目優(yōu)雅實現(xiàn)自動引入組件的方法詳解

    在我們寫vue項目的時候,都會引入一些組件庫,有時候有可能還不止一個組件庫,那么如何優(yōu)雅的實現(xiàn)自動引入組件呢,下面小編就來和大家詳細(xì)講講吧
    2023-09-09
  • vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼

    vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼

    這篇文章主要介紹了vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • 解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題

    解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題

    今天小編就為大家分享一篇解決vue中post方式提交數(shù)據(jù)后臺無法接收的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue中的style樣式如何動態(tài)綁定

    vue中的style樣式如何動態(tài)綁定

    這篇文章主要介紹了vue中的style樣式如何動態(tài)綁定,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue頁面骨架屏的實現(xiàn)方法

    Vue頁面骨架屏的實現(xiàn)方法

    在開發(fā)webapp的時候總是會受到首屏加載時間過長的影響,越來越多的APP采用了“骨架屏”的方式去提升用戶體驗。這篇文章主要介紹了Vue頁面骨架屏的實現(xiàn)方法,感興趣的小伙伴們可以參考一下
    2018-05-05

最新評論