快捷導(dǎo)航

vue3中watch監(jiān)聽的四種寫法

更新時間：2024年02月02日 08:41:22 作者：荀鼠不是鼠

本文主要介紹了vue3中watch監(jiān)聽的四種寫法,包含了ref 定義的數(shù)據(jù),reactive定義的數(shù)據(jù),函數(shù)返回的值（getter函數(shù)）和前面3個內(nèi)容的數(shù)組,具有一定的參考價值,感興趣的可以了了解一下

寫法

情況一

監(jiān)視ref定義的基本數(shù)據(jù)類型：直接寫數(shù)據(jù)名即可，監(jiān)視的是value值的改變

<template>
  <div class="person">
    <h1>情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)</h1>
    <h2>當(dāng)前求和為：{{sum}}</h2>
    <button @click="changeSum">點我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 數(shù)據(jù)
  let sum = ref(0)
  // 方法
  function changeSum(){
    sum.value += 1
  }
  // 監(jiān)視，情況一：監(jiān)視【ref】定義的【基本類型】數(shù)據(jù)
  const stopWatch = watch(sum,(newValue,oldValue)=>{
    console.log('sum變化了',newValue,oldValue) //newValue是新的數(shù)據(jù)，oldvalue是舊的數(shù)據(jù)
    if(newValue >= 10){
      stopWatch()
    }
  })
</script>

情況二

監(jiān)視ref定義的【對象類型】數(shù)據(jù)：直接寫數(shù)據(jù)名，監(jiān)視的是對象的【地址值】，若想監(jiān)視對象內(nèi)部的數(shù)據(jù)，要手動開啟深度監(jiān)視。

<template>
  <div class="person">
    <h1>情況二：監(jiān)視【ref】定義的【對象類型】數(shù)據(jù)</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年齡：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年齡</button>
    <button @click="changePerson">修改整個人</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch} from 'vue'
  // 數(shù)據(jù)
  let person = ref({
    name:'張三',
    age:18
  })
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:'李四',age:90}
  }
  /* 
    監(jiān)視，情況一：監(jiān)視【ref】定義的【對象類型】數(shù)據(jù)，監(jiān)視的是對象的地址值，若想監(jiān)視對象內(nèi)部屬性的變化，需要手動開啟深度監(jiān)視
    watch的第一個參數(shù)是：被監(jiān)視的數(shù)據(jù)
    watch的第二個參數(shù)是：監(jiān)視的回調(diào)
    watch的第三個參數(shù)是：配置對象（deep、immediate等等.....） 
  */
  watch(person,(newValue,oldValue)=>{
    console.log('person變化了',newValue,oldValue)
  },{deep:true})
  
</script>

情況三

監(jiān)視reactive定義的【對象類型】數(shù)據(jù)，且默認(rèn)開啟了深度監(jiān)視。

<template>
  <div class="person">
    <h1>情況三：監(jiān)視【reactive】定義的【對象類型】數(shù)據(jù)</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年齡：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年齡</button>
    <button @click="changePerson">修改整個人</button>
    <hr>
    <h2>測試：{{obj.a.b.c}}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
  // 數(shù)據(jù)
  let person = reactive({
    name:'張三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }

  // 監(jiān)視，情況三：監(jiān)視【reactive】定義的【對象類型】數(shù)據(jù)，且默認(rèn)是開啟深度監(jiān)視的
  watch(person,(newValue,oldValue)=>{
    console.log('person變化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj變化了',newValue,oldValue)
  })
</script>

情況四

監(jiān)視ref或reactive定義的【對象類型】數(shù)據(jù)中的某個屬性，注意點如下：

若該屬性值不是【對象類型】，需要寫成函數(shù)形式。
若該屬性值是依然是【對象類型】，可直接編，也可寫成函數(shù)，建議寫成函數(shù)。

結(jié)論：監(jiān)視的要是對象里的屬性，那么最好寫函數(shù)式，注意點：若是對象監(jiān)視的是地址值，需要關(guān)注對象內(nèi)部，需要手動開啟深度監(jiān)視。

<template>
  <div class="person">
    <h1>情況四：監(jiān)視【ref】或【reactive】定義的【對象類型】數(shù)據(jù)中的某個屬性</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年齡：{{ person.age }}</h2>
    <h2>汽車：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年齡</button>
    <button @click="changeC1">修改第一臺車</button>
    <button @click="changeC2">修改第二臺車</button>
    <button @click="changeCar">修改整個車</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 數(shù)據(jù)
  let person = reactive({
    name:'張三',
    age:18,
    car:{
      c1:'奔馳',
      c2:'寶馬'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奧迪'
  }
  function changeC2(){
    person.car.c2 = '大眾'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'愛瑪'}
  }

  // 監(jiān)視，情況四：監(jiān)視響應(yīng)式對象中的某個屬性，且該屬性是基本類型的，要寫成函數(shù)式
  /* watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name變化了',newValue,oldValue)
  }) */

  // 監(jiān)視，情況四：監(jiān)視響應(yīng)式對象中的某個屬性，且該屬性是對象類型的，可以直接寫，也能寫函數(shù)，更推薦寫函數(shù)
  watch(()=>person.car,(newValue,oldValue)=>{
    console.log('person.car變化了',newValue,oldValue)
  },{deep:true})
</script>

情況五

監(jiān)視多個數(shù)據(jù)

<template>
  <div class="person">
    <h1>情況五：監(jiān)視上述的多個數(shù)據(jù)</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年齡：{{ person.age }}</h2>
    <h2>汽車：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年齡</button>
    <button @click="changeC1">修改第一臺車</button>
    <button @click="changeC2">修改第二臺車</button>
    <button @click="changeCar">修改整個車</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'

  // 數(shù)據(jù)
  let person = reactive({
    name:'張三',
    age:18,
    car:{
      c1:'奔馳',
      c2:'寶馬'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奧迪'
  }
  function changeC2(){
    person.car.c2 = '大眾'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'愛瑪'}
  }

  // 監(jiān)視，情況五：監(jiān)視上述的多個數(shù)據(jù)
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car變化了',newValue,oldValue)
  },{deep:true})

</script>

到此這篇關(guān)于vue3中warch監(jiān)聽的幾種寫法的文章就介紹到這了,更多相關(guān)vue3 warch監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: