這篇文章主要介紹“Vue3中的watch如何使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue3中的watch如何使用”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)公司是專業(yè)的沙縣網(wǎng)站建設公司，沙縣接單;提供成都做網(wǎng)站、成都網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行沙縣網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

一、watch的基本實例

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import {ref,reactive, watch} from 'vue'
const count = ref(0)
function changCount(){
  count.value++
}
watch(count,(newValue,oldValue)=>{
  if(newValue){
    console.log(`我偵聽到了count狀態(tài)的變化，當前值為${newValue},從而處理相關邏輯`);
  }
})
</script>
 
<style>
 
</style>

二、watch監(jiān)聽多個數(shù)據(jù)

getter 函數(shù)：

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`我是x與y之和${sum}`);
  }
);
</script>
 
<style>
</style>

多個來源組成的數(shù)組

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  [x,y],
  ([x,y]) => {
    console.log(`我是x=>${x},我是y=》${y}`);
  }
);
</script>
 
<style>
</style>

三、watch監(jiān)聽對象的值

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:'你好'})
function changObj(){
  obj.value.name+='我不好'
}
watch(()=>obj.value.name,(name)=>{
  console.log(name);
})
</script>
 
<style>
</style>

四、watch監(jiān)聽器的配置參數(shù)

1.deep

用于開啟深度監(jiān)聽

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
  obj.value.name+='我不好'
}
// obj是一個RefImpl對象，當不開啟深度監(jiān)聽的時候，監(jiān)聽obj無法檢測到obj屬性的變化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true })
</script>
 
<style>
</style>

2.immediate

是否開啟初始化檢測，默認是值發(fā)生變化時，才會執(zhí)行監(jiān)聽器里面的方法，開啟immediate后初始化就執(zhí)行一次。

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
  obj.value.name+='我不好'
}
// obj是一個RefImpl對象，當不開啟深度監(jiān)聽的時候，監(jiān)聽obj無法檢測到obj屬性的變化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
 
<style>
</style>

五、通過watchEffect()簡化watch

偵聽器的回調使用與源完全相同的響應式狀態(tài)是很常見的。例如：

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
  obj.value.name+='我不好'
}
watch(obj.value,()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

我們可以使用watchEffect 函數(shù)來簡化上面的代碼。watchEffect() 允許我們自動跟蹤回調的響應式依賴。上面的偵聽器可以重寫為：

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:'你好'})
function changObj(){
  obj.value.name+='我不好'
}
// watch(obj.value,()=>{
//   console.log(obj.value.name);
// })
watchEffect(()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

注：需要注意的是watchEffect 回調會立即執(zhí)行，不需要指定immediate

六、watch vs. watchEffect

watch 和 watchEffect 都能響應式地執(zhí)行有副作用的回調。它們之間的主要區(qū)別是追蹤響應式依賴的方式：

• watch 只追蹤明確偵聽的數(shù)據(jù)源。它不會追蹤任何在回調中訪問到的東西。另外，僅在數(shù)據(jù)源確實改變時才會觸發(fā)回調。watch 會避免在發(fā)生副作用時追蹤依賴，因此，我們能更加精確地控制回調函數(shù)的觸發(fā)時機。

• watchEffect，則會在副作用發(fā)生期間追蹤依賴。它會在同步執(zhí)行過程中，自動追蹤所有能訪問到的響應式屬性。這更方便，而且代碼往往更簡潔，但有時其響應性依賴關系會不那么明確。

七、回調觸發(fā)機制與停止監(jiān)聽器

如果想在偵聽器回調中能訪問被 Vue 更新之后的 DOM，你需要指明 flush: 'post' 選項：

watch(source, callback, {
  flush: 'post'
})
 
watchEffect(callback, {
  flush: 'post'
})

停止監(jiān)聽

在 setup() 或 <script setup> 中用同步語句創(chuàng)建的偵聽器，會自動綁定到宿主組件實例上，并且會在宿主組件卸載時自動停止。因此，在大多數(shù)情況下，你無需關心怎么停止一個偵聽器。

一個關鍵點是，偵聽器必須用同步語句創(chuàng)建：如果用異步回調創(chuàng)建一個偵聽器，那么它不會綁定到當前組件上，你必須手動停止它，以防內(nèi)存泄漏。如下方這個例子：

// ...當該偵聽器不再需要時
unwatch()

關于“Vue3中的watch如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

當前文章：Vue3中的watch如何使用
文章網(wǎng)址：http://www.chinadenli.net/article34/jdhpse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站營銷、App設計、、服務器托管、網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)