一、watch 新用法

選項(xiàng)式API中，watch 使用

watch:{

 mood(curVal,preVal){

  console.log('cur',curVal);//最新值

  console.log('pre',preVal);//修改之前的值

 }

}

1.1、watch 使用語法

在 Composition API 中，使用 watch 時，必須先引入。

使用語法為：

import { watch } from "vue"

watch(

 name ,

 ( curVal , preVal )=>{ //業(yè)務(wù)處理  },

 options

)

共有三個參數(shù)，分別為：

• name ：需要幀聽的屬性
• (curVal,preVal)=>{ //業(yè)務(wù)處理 } 箭頭函數(shù)，是監(jiān)聽到的最新值和本次修改之前的值，此處進(jìn)行邏輯處理。
• options ：配置項(xiàng)，對監(jiān)聽器的配置，如：是否深度監(jiān)聽。

頁面剛進(jìn)入的時候并不會執(zhí)行，值發(fā)生改變的時候，才會打印出當(dāng)前最新值和修改之前的值。

示例1：監(jiān)聽一個數(shù)據(jù)

import { ref , watch } from "vue"

export default{

 setup(){

  const mood = ref("")

  //幀聽器

  watch(mood,(curVal,preVal)=>{

   console.log('cur',curVal);

   console.log('pre',preVal);

  },{

   //配置項(xiàng)

  })

  return{

   mood

  }

 }

}

watch 也可以監(jiān)聽多個屬性值，此時傳入的數(shù)據(jù)變成數(shù)組形式，配置項(xiàng)保持不變。

1.2、watch 監(jiān)聽多個屬性值

示例2：監(jiān)聽多個屬性

watch([mood,target],([curMood,curTarget],[preMood,preTarget])=>{

 console.log('curMood',curMood);

 console.log('preMood',preMood);

 console.log('curTarget',curTarget);

 console.log('preTarget',preTarget);

},{

  //配置項(xiàng)

}) 

1.3、watch 監(jiān)聽引用數(shù)據(jù)類型

watch 監(jiān)聽引用數(shù)據(jù)類型時，如果只監(jiān)聽其中某個屬性時，

使用語法如下：

watch(()=>obj.name,(curValue,preValue)=>{

 //幀聽引用數(shù)據(jù)類型的某個屬性

},{

 //配置項(xiàng)

})

第一個參數(shù)，回調(diào)函數(shù)返回的是需要幀聽對象的屬性。后邊的參數(shù)與上邊的一致。

示例3：幀聽對象某個屬性

<template>

 <div>

  {{obj}}

  <input type="text" v-model="obj.name">

 </div>

</template>

<script>

import { ref , reactive , watch } from "vue"

export default{

 setup(){

  const obj = reactive({ name:'qq',sex:'女' })

  watch(()=>obj.name,(cur,pre)=>{

   console.log('cur',cur);

  },{ })

  return{

   obj

  }

 }

}

</script>

如果我們試著把屬性去掉，直接監(jiān)聽整個對象，發(fā)現(xiàn)watch好像失效了。此時我們就需要引入 watchEffect。

二、watchEffect

watchEffect 也是一個幀聽器，是一個副作用函數(shù)。它會監(jiān)聽引用數(shù)據(jù)類型的所有屬性，不需要具體到某個屬性，一旦運(yùn)行就會立即監(jiān)聽，組件卸載的時候會停止監(jiān)聽。

示例4：監(jiān)聽對象

<template>

  <div>

    {{obj}}

    <input type="text" v-model="obj.name">

    <input type="text" v-model="obj.sex">

  </div>

</template>

<script>

import {   reactive  , watchEffect } from "vue"

export default{

  setup(){

    let obj = reactive({ name:'qq',sex:'女'})

    watchEffect(() => {

      console.log('name',obj.name);

      console.log('sex' , obj.sex);

    })

    return{

      obj

    }

  }

}

</script>

 

watchEffect 參數(shù)只有一個回調(diào)函數(shù)。此時刷新頁面進(jìn)入，watchEffect 就會打印結(jié)果。

三、watch 與 watchEffect 區(qū)別和聯(lián)系

watch 與 watchEffect 都是監(jiān)聽器，那么它們之間有什么關(guān)系呢？

3.1、watch特點(diǎn)

watch 監(jiān)聽函數(shù)可以添加配置項(xiàng)，也可以配置為空，配置項(xiàng)為空的情況下，

watch的特點(diǎn)為：

• 有惰性：運(yùn)行的時候，不會立即執(zhí)行。
• 更加具體：需要添加監(jiān)聽的屬性。
• 可以訪問屬性之前的值：回調(diào)函數(shù)內(nèi)會返回最新值和修改之前的值。
• 可配置：可以添加配置項(xiàng)。

3.2、watch 配置項(xiàng)

watch 的配置項(xiàng)可以補(bǔ)充watch特點(diǎn)上的不足，可以配置的有：

• immediate：配置watch屬性是否立即執(zhí)行，值為 true 時，一旦運(yùn)行就會立即執(zhí)行，值為false時，保持惰性。
• deep：配置 watch 是否深度監(jiān)聽，值為 true 時，可以監(jiān)聽對象所有屬性，值為 false 時保持更加具體特性，必須指定到具體的屬性上。

3.3、watchEffect 特點(diǎn)

watchEffect 副作用函數(shù)它的特點(diǎn)分別為：

• 非惰性：一旦運(yùn)行就會立即執(zhí)行。
• 更加抽象：使用時不需要具體指定監(jiān)聽的誰，回調(diào)函數(shù)內(nèi)直接使用就可以。相比watch比較難理解。
• 不可訪問之前的值：只能訪問當(dāng)前最新的值，訪問不到修改之前的值。

3.4、watch 與 watchEffect 聯(lián)系

watch 的前兩個特點(diǎn)與 watchEffect 的兩個特點(diǎn)剛好相反，watch 通過配置項(xiàng)可以修改成帶有 watchEffect 特點(diǎn)。

示例5：watch 監(jiān)聽對象

<template>

 <div>

  {{obj}}

  <input type="text" v-model="obj.name">

 </div>

</template>

<script>

import { ref , reactive , watch } from "vue"

export default{

 setup(){

  const obj = reactive({ name:'qq',sex:'女' })

  watch(()=>obj,(cur,pre)=>{

   console.log('cur',cur);

  },{ 

   immediate:true,

   deep:true

  })

  return{

   obj

  }

 }

}

</script>

到此這篇關(guān)于 vue 3 中watch 和watchEffect 的新用法的文章就介紹到這了,更多相關(guān) vue 3 中watch 和watchEffect 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論