vue3 watch監視詳解

watch監視

一：watch監視{ref}定義的基本類型結構

<template><div class="person"><h1>情況一:watch監視{ref}定義的基本類型結構</h1><h1>當前的和為{{ sum }}</h1><button @click="changeSum">點我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'let sum=ref(0)function changeSum(){sum.value +=1;}//監視情況一:watch監視{ref}定義的基本類型結構//當新的值大于等于8的時候停止監視const stopWatch=watch(sum,(newValue,oldValue)=>{console.log('sum變化了一下',newValue,oldValue)if(newValue>=8){stopWatch()}})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在這里插入圖片描述
點擊按鈕之后價格加一 watch監視sum 在控制臺打印了新的值和舊的值

在這里插入圖片描述
當新的值大于等于8的時候停止監視

在這里插入圖片描述

二：watch監視{ref}定義的對象類型結構

watch的第一個參數：被監視的數據
watch的第二個參數：回調函數
watch的第三個參數：監視配置(deep,immediade等等)

<template><div class="person"><h1>情況二:watch監視{ref}定義的【對象類型】結構</h1><h2>汽車名字:{{ car.name }}</h2><h2>汽車價格:{{ car.price }}</h2><button @click="changeName">修改汽車名字</button><button @click="changePrice">修改汽車價格</button><button @click="changeCar">修改汽車</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'let car=ref({name:'蘭博基尼',price:1000000})function changeName(){car.value.name+='6'}function changePrice(){car.value.price+=10000}function changeCar(){car.value ={name:"寶馬",price:300000}}//監視【ref】定義的【對象類型】數據,監視的是對象的地址值watch(car,(newValue,oldValue)=>{console.log('car改變了',newValue,oldValue)})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在這里插入圖片描述
在這里修改汽車名字和修改汽車價格控制臺都不會打印最新的值和舊的值是因為監視的是對象的地址值

若想監視對象內部屬性的變化的話,需要手動開啟深度監視

<template><div class="person"><h1>情況二:watch監視{ref}定義的【對象類型】結構</h1><h2>汽車名字:{{ car.name }}</h2><h2>汽車價格:{{ car.price }}</h2><button @click="changeName">修改汽車名字</button><button @click="changePrice">修改汽車價格</button><button @click="changeCar">修改汽車</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'let car=ref({name:'蘭博基尼',price:1000000})function changeName(){car.value.name+='6'}function changePrice(){car.value.price+=10000}function changeCar(){car.value ={name:"寶馬",price:300000}}//監視【ref】定義的【對象類型】數據,監視的是對象的地址值watch(car,(newValue,oldValue)=>{console.log('car改變了',newValue,oldValue)},{deep:true})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在這里插入圖片描述
這個時候對象內部屬性發生改變了那么他監視也會打印出新的值和舊的值

三:監視{reactive}定義的【對象類型】結構

監視【reactive】定義的【對象類型】數據,且默認開啟深度監視


<template><div class="person"><h1>情況三:監視{reactive}定義的【對象類型】結構</h1><h2>汽車名字:{{ car.name }}</h2><h2>汽車價格:{{ car.price }}</h2><button @click="changeName">修改汽車名字</button><button @click="changePrice">修改汽車價格</button><button @click="changeCar">修改汽車</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'蘭博基尼',price:1000000})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeCar(){Object.assign(car,{name:"寶馬",price:300000})}//監視【reactive】定義的【對象類型】數據,且默認開啟深度監視watch(car,(newValue,oldValue)=>{console.log('car改變了',newValue,oldValue)   })
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在這里插入圖片描述
當點擊修改汽車名字或修改汽車價格或修改汽車時他都監視到了

情況四:監視{reactive}定義的【對象類型】結構的某一個屬性

若該屬性值不是【對象類型】，需要寫成函數形式。

<template><div class="person"><h1>情況四:監視{reactive}定義的【對象類型】結構的某一個屬性的時候</h1><h2>汽車品牌:{{ car.name }}</h2><h2>汽車價格:{{ car.price }}</h2><h2>汽車樣式:{{ car.design.first }} ,{{ car.design.second }}</h2><button @click="changeName">修改汽車品牌</button><button @click="changePrice">修改汽車價格</button><button @click="changeFirst">修改汽車樣式一</button><button @click="changeSecond">修改汽車樣式二</button><button @click="changeDesign">修改整個汽車樣式</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'奔馳',price:300000,design:{first:'梅賽德斯',second:'E300'}})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeFirst(){car.design.first='奔馳C260l'}function changeSecond(){car.design.second='奔馳A'}function changeDesign(){car.design={first:'奔馳GLS',second:'奔馳EQ'}}//假如我只想監視cat.namewatch(()=>{return car.name},(newValue,oldValue)=>{console.log('car.name改變了',newValue,oldValue)})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在這里插入圖片描述
假如我修改汽車價格修改汽車樣式一修改汽車樣式二修改整個汽車樣式都不會監視因為我只監視了car.name 只有car.name 發生了改變的時候控制臺才會輸出新的值和舊的值

在這里插入圖片描述
2. 若該屬性值依然是【對象類型】，可直接編，也可寫成函數，不過建議寫成函數。

假設我想只監視整個汽車樣式修改

<template><div class="person"><h1>情況四:監視{reactive}定義的【對象類型】結構的某一個屬性的時候</h1><h2>汽車品牌:{{ car.name }}</h2><h2>汽車價格:{{ car.price }}</h2><h2>汽車樣式:{{ car.design.first }} ,{{ car.design.second }}</h2><button @click="changeName">修改汽車品牌</button><button @click="changePrice">修改汽車價格</button><button @click="changeFirst">修改汽車樣式一</button><button @click="changeSecond">修改汽車樣式二</button><button @click="changeDesign">修改整個汽車樣式</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'奔馳',price:300000,design:{first:'梅賽德斯',second:'E300'}})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeFirst(){car.design.first='奔馳C260l'}function changeSecond(){car.design.second='奔馳A'}function changeDesign(){car.design={first:'奔馳GLS',second:'奔馳EQ'}}// //假如我只想監視cat.name// watch(()=>{return car.name},(newValue,oldValue)=>{//     console.log('car.name改變了',newValue,oldValue)// })//假如我只想監視cat.designwatch(()=>car.design,(newValue,oldValue)=>{console.log('car.name改變了',newValue,oldValue)},{deep:true})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在這里插入圖片描述
當我點擊修改汽車品牌或修改汽車價格他并沒有監視 , 因為我只監視修改汽車樣式不論是修改汽車樣式一還是修改汽車樣式二或者是修改整個汽車樣式他都監視到了

情況五:監視上述的多個數據

<template><div class="person"><h1>情況五:監視上述的多個數據</h1><h2>汽車品牌:{{ car.name }}</h2><h2>汽車價格:{{ car.price }}</h2><h2>汽車樣式:{{ car.design.first }} ,{{ car.design.second }}</h2><button @click="changeName">修改汽車品牌</button><button @click="changePrice">修改汽車價格</button><button @click="changeFirst">修改汽車樣式一</button><button @click="changeSecond">修改汽車樣式二</button><button @click="changeDesign">修改整個汽車樣式</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'奔馳',price:300000,design:{first:'梅賽德斯',second:'E300'}})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeFirst(){car.design.first='奔馳C260l'}function changeSecond(){car.design.second='奔馳A'}function changeDesign(){car.design={first:'奔馳GLS',second:'奔馳EQ'}}//監視  :情況5：監視上述多個數據watch([()=>car.name,()=>car.design.first],(newValue,oldValue)=>{console.log('car.name改變了',newValue,oldValue)},{deep:true})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在這里插入圖片描述
這時候當我修改汽車名字和汽車第一個樣式他會打印出來新的值和舊的值

watchEffect監視

<template><div class="person"><h1>需求:若寬度達到20 或者高度達到15時   向服務器發送一個請求</h1><h2>寬度為:{{ width }}</h2><h2>高度為:{{ height }}</h2><button @click="changeWidth">點我寬加一</button><button @click="changeHeigth">點我高加一</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'let width=ref(15)let height=ref(10)function changeWidth(){width.value +=1}function changeHeigth(){height.value +=1}watchEffect(()=>{if(width.value >=20 || height.value >=15){console.log('向服務器發送請求')}})</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>