watch 監聽 reative 建立的值

const state = reactive({ nickname: "xiaofan", age: 20 });

setTimeout(() => {
  state.age++;
}, 800);

// 修改age值時會觸發 watch的回調
watch(
  () => state.age,   //監聽state中的age
  (newValue, oldValue) => {
	console.log("新值:", newValue, "老值:", oldValue);
  }
);

watch 監聽 ref 建立的值

const year = ref(100);

setTimeout(() => {
  year.value++;
}, 1000);

watch(() => state.value, (newValue, oldValue) => {
  console.log("新值:", newValue, "老值:", oldValue);
});

watch 監聽多個值

const state = ref(100)
let  person=reactive({
  name:'zs'
})

setTimeout(() => {
  state.value++;
  person.name='李四'
}, 800);

watch(()=>[state.value,   person.name ],([newAge,newName], [oldAge, oldName])=>{
  console.log("年齡new:", newAge, "年齡old:", oldAge); 
  console.log("名稱new:", newName,"年齡old:", oldName);
},);

// 如果監聽多個對象，第一個函數傳回一個數組，
//數組中表示監聽的值  ()=>[state.value,   person.name ]

// 第二個匿名函數， ([new1,new2],[old1,old2])=>{ }

watch去監聽路由

watch(
  () => route.fullPath,
  (n, o) => {
	 console.log('監聽路由')
	 console.log('new:' + n + ',old:' + o)
  }
)

watch 的第三個參數 deep:true, immediate: true

watch(() => state.value, (newValue, oldValue) => {
  console.log("新值:", newValue, "老值:", oldValue); 
},{ deep: true, immediate: true } );

deep: true 表示開啟深度監聽。
immediate: true 無論資料是否發生變化，資料預設執行一次

在開啟immediate: true。如何值沒有發生變化，
newValue是初始值
oldValue就是 undefined

如何watch監聽

有些時候，當我們監聽到資料發生變化後。可能就不需要再次進行監聽了。
這個時候我們可以取消監聽。
将watch 指派給一個變量。
let stopWatch=watch(僞代碼);
   
然後需要取消的時候再次調用一次就可以了
stopWatch()
看下面的代碼，當我點選取消監聽按鈕的時候。
就算資料發生變化，watch也會對該資料進行監聽了

stop 停止監聽watch的監聽

<template>
 <div>
 <div class="bg">
	 {{ person }}
 </div>
 <a-button @click="changeValue">值發生變化了</a-button>
 <a-button @click="cancelHander">取消監聽</a-button>
 </div>
</template>
<script lang="ts">
import { defineComponent, reactive, watch } from 'vue';
export default defineComponent({
  setup() {
   let  person=reactive({
      name:'zs'
   })
   let changeValue=()=>{
      person.name='lisi'
   }
   // 修改age值時會觸發 watch的回調
   let stopWatch=watch(
      () => person.name,   //監聽state中的age
      (newValue, oldValue) => {
         console.log("新值:", newValue, "老值:", oldValue);
      }
   );
   // 停止watch監聽
   let cancelHander=()=>{
      stopWatch()
   }
   return {
      cancelHander,
      person,
      changeValue,
   };
  },
});
</script>

watchEffect的引入

還有一個監聽函數watchEffect, 
在我看來watch已經能滿足監聽的需求，
為什麼還要有watchEffect呢？
雖然我沒有 get 到它的必要性，
但是還是要介紹一下watchEffect，首先看看它的使用和watch究竟有何不同。

let  person=reactive({
  name:'zs'
})

let state=ref(100)

setInterval(()=>{
  person.name='我是李四',
  state.value=1000
},1000)

// 修改age值時會觸發 watch的回調
watchEffect(()=>{
	 console.log('state的變化後的值', state.value);
	 console.log('state的變化後的值', person.name);
} );

watchEffect發生的現象

執行結果首先列印一次state和name；然後隔一秒後，列印state和name值。
從上面的代碼可以看出， 并沒有像watch一樣需要先傳入依賴，
watchEffect會自動收集依賴, 隻要指定一個回調函數。
在元件初始化時， 會先執行一次來收集依賴， 然後當收集到的依賴中資料發生變化時， 
就會再次執行回調函數。是以總結對比如下：

watchEffect 不需要手動傳入依賴
watchEffect 會先執行一次用來自動收集依賴
watchEffect 無法擷取到變化前的值， 隻能擷取變化後的值

我們公司正在尋找前端和後端，感興趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，請帶我們飛

如果你是菜鳥，我們帶你飛

作者：明月人倚樓

出處：https://www.cnblogs.com/IwishIcould/

想問問題，打賞了卑微的部落客，求求你備注一下的扣扣或者微信；這樣我好聯系你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注部落客，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。

vue3保證你看懂watch和watchEffect的詳細詳細使用