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

Vue2和Vue3如何使用watch偵聽器詳解

 更新時(shí)間:2021年09月24日 10:13:12   作者:SpringSir  
這篇文章主要介紹了在Vue2和Vue3中如何使用watch偵聽器,分別對vue2及vue3作了詳細(xì)的說明,有需要的朋友可以借鑒參考下,希望能夠有所幫助

watch:偵聽數(shù)據(jù)變化 (某個(gè)值的change事件)

vue2.x

 data(){
     return{
         num:10
     }
 },
 watch:{
      num:{
	      /*
	       *   newValue:當(dāng)前值
           *   oldValue:修改上一刻的值
	       */
          handler(newValue,oldValue){
          	// doSomething
          },
          /*
           * deep:Boolean : 深度監(jiān)聽
           * 	true: 監(jiān)聽堆的改變就
           * 	false:只監(jiān)聽棧的改變(默認(rèn))
           */
          deep:true/false,
          /*
           * immediate:Boolean : 是否在第一次定義時(shí)就執(zhí)行handler函數(shù)
           * 	true: 在第一次定義時(shí)就執(zhí)行handler函數(shù)
           * 	false:修改后再執(zhí)行handler函數(shù)
           */          
          immediate:true/false
      }      
  }

vue3.x

 watch用于監(jiān)聽響應(yīng)式的數(shù)據(jù)

基本使用

const num = ref(0)
1. 導(dǎo)入  import {watch} from 'vue'
2. 使用
	 `const 返回值= watch(需要監(jiān)聽的值, (newVal,oldVal)=>{ }, {deep,immediate,flush})`
	 
	 返回值: 可以關(guān)閉監(jiān)聽: 返回值()
	 參數(shù)一: 需要監(jiān)聽的值
	 			 基本數(shù)據(jù)類型(Number,String,Boolean,null,undefined):  ()=>基本數(shù)據(jù)類型值
	 			 復(fù)雜數(shù)據(jù)類型(Array,Object,Function):			直接寫/()=>基本數(shù)據(jù)類型值
	 參數(shù)二: 類比Vue2中的handler函數(shù)
	 參數(shù)三: {}對象, 對象中可以有個(gè)配置項(xiàng):deep,immediate,flush,
	 		deep,immediate的意思上面有過描述, 這里主要對flush的取值做說明:
	 			 `flush:post/sync/pre
      				   pre(默認(rèn)值):渲染前,值改變了,沒有渲染到dom
      				   post:渲染后,值改變了,也渲染到dom
    				   sync:改變一次渲染一次,每一次都是渲染前`
	 		

注意點(diǎn):
實(shí)際開發(fā)中監(jiān)聽不到變化 統(tǒng)一使用

watch(()=>響應(yīng)式數(shù)據(jù),()=>{},{deep:true})

以上就是Vue2和Vue3如何使用watch偵聽器詳解的詳細(xì)內(nèi)容,更多關(guān)于watch偵聽器使用的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程

    vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程

    這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框?qū)崙?zhàn)教程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-07-07
  • vue實(shí)現(xiàn)換膚功能

    vue實(shí)現(xiàn)換膚功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)換膚功能,一套深色,一套淺色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • Vue組件開發(fā)初探

    Vue組件開發(fā)初探

    本篇文章主要介紹了Vue組件開發(fā)初探,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-02-02
  • Vue父子組建的簡單通信之控制開關(guān)Switch的實(shí)現(xiàn)

    Vue父子組建的簡單通信之控制開關(guān)Switch的實(shí)現(xiàn)

    這篇文章主要介紹了Vue父子組建的簡單通信之控制開關(guān)Switch的實(shí)現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue多頁面開發(fā)和打包正確處理方法

    vue多頁面開發(fā)和打包正確處理方法

    這篇文章主要介紹了vue多頁面開發(fā)和打包的正確處理方法,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-04-04
  • 使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼

    使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖的代碼

    徑向條形圖是一種用于可視化單一數(shù)據(jù)點(diǎn)及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時(shí)非常有用,本文給大家介紹了使用Vue3和ApexCharts實(shí)現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下
    2024-06-06
  • VUE里如何修改element-ui的顯示層次與上下間隔

    VUE里如何修改element-ui的顯示層次與上下間隔

    這篇文章主要介紹了VUE里如何修改element-ui的顯示層次與上下間隔問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動

    Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • Vue中使用icon的幾種常用方法

    Vue中使用icon的幾種常用方法

    這篇文章主要給大家介紹了關(guān)于Vue中使用icon的幾種常用方法,icon圖標(biāo)的使用 Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下
    2023-07-07
  • vue3在router中使用store報(bào)錯的完美解決方案

    vue3在router中使用store報(bào)錯的完美解決方案

    這篇文章主要介紹了vue3在router中使用store報(bào)錯解決方案,就是需要在實(shí)例化一下,因?yàn)樵诰幾grouter的時(shí)候pinia還未被實(shí)例化,文中補(bǔ)充介紹了vue3中router和store詳細(xì)使用教程方法,感興趣的朋友一起看看吧
    2023-11-11

最新評論