Vue3中watch的最佳用法
watch函數(shù)用于偵聽某個值的變化,當(dāng)該值發(fā)生改變后,觸發(fā)對應(yīng)的處理邏輯。
一、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)的變化,當(dāng)前值為${newValue},從而處理相關(guān)邏輯`); } }) </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對象,當(dāng)不開啟深度監(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對象,當(dāng)不開啟深度監(jiān)聽的時候,監(jiān)聽obj無法檢測到obj屬性的變化 watch(obj,()=>{ console.log(obj.value.name); }, { deep: true,immediate:true }) </script> <style> </style>
五、通過watchEffect()簡化watch
偵聽器的回調(diào)使用與源完全相同的響應(yīng)式狀態(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()
允許我們自動跟蹤回調(diào)的響應(yīng)式依賴。上面的偵聽器可以重寫為:
<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 回調(diào)會立即執(zhí)行,不需要指定immediate
六、watch vs. watchEffect
watch 和 watchEffect 都能響應(yīng)式地執(zhí)行有副作用的回調(diào)。它們之間的主要區(qū)別是追蹤響應(yīng)式依賴的方式:
- watch 只追蹤明確偵聽的數(shù)據(jù)源。它不會追蹤任何在回調(diào)中訪問到的東西。另外,僅在數(shù)據(jù)源確實改變時才會觸發(fā)回調(diào)。watch 會避免在發(fā)生副作用時追蹤依賴,因此,我們能更加精確地控制回調(diào)函數(shù)的觸發(fā)時機。
- watchEffect,則會在副作用發(fā)生期間追蹤依賴。它會在同步執(zhí)行過程中,自動追蹤所有能訪問到的響應(yīng)式屬性。這更方便,而且代碼往往更簡潔,但有時其響應(yīng)性依賴關(guān)系會不那么明確。
七、回調(diào)觸發(fā)機制與停止監(jiān)聽器
如果想在偵聽器回調(diào)中能訪問被 Vue 更新之后的 DOM,你需要指明 flush: 'post' 選項:
watch(source, callback, { flush: 'post' }) watchEffect(callback, { flush: 'post' })
停止監(jiān)聽
在 setup() 或 <script setup> 中用同步語句創(chuàng)建的偵聽器,會自動綁定到宿主組件實例上,并且會在宿主組件卸載時自動停止。因此,在大多數(shù)情況下,你無需關(guān)心怎么停止一個偵聽器。
一個關(guān)鍵點是,偵聽器必須用同步語句創(chuàng)建:如果用異步回調(diào)創(chuàng)建一個偵聽器,那么它不會綁定到當(dāng)前組件上,你必須手動停止它,以防內(nèi)存泄漏。如下方這個例子:
// ...當(dāng)該偵聽器不再需要時 unwatch()
到此這篇關(guān)于Vue3中watch的最佳用法的文章就介紹到這了,更多相關(guān)Vue3中watch的用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue-cli項目webpack打包后iconfont文件路徑的問題
今天小編就為大家分享一篇解決vue-cli項目webpack打包后iconfont文件路徑的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題
這篇文章主要介紹了vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue 實現(xiàn)一個簡單的鼠標(biāo)拖拽滾動效果插件
這篇文章主要介紹了Vue 實現(xiàn)一個簡單的鼠標(biāo)拖拽滾動效果插件,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty與Proxy區(qū)別
這篇文章主要為大家介紹了vue數(shù)據(jù)監(jiān)聽解析Object.defineProperty Proxy源碼示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03vue如何修改el-form-item中的label樣式修改問題
這篇文章主要介紹了vue如何修改el-form-item中的label樣式修改問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10