您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue中watch和watchEffect的區(qū)別是什么的相關(guān)知識點,內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
watch函數(shù)與watchEffect函數(shù)都是監(jiān)聽器,在寫法和用法上有一定區(qū)別,是同一功能的兩種不同形態(tài),底層都是一樣的。
watch
顯式指定依賴數(shù)據(jù),依賴數(shù)據(jù)更新時執(zhí)行回調(diào)函數(shù)
具有一定的惰性lazy 第一次頁面展示的時候不會執(zhí)行,只有數(shù)據(jù)變化的時候才會執(zhí)行(設(shè)置immediate: true
時可以變?yōu)榉嵌栊裕撁媸状渭虞d就會執(zhí)行)
監(jiān)視ref定義的響應(yīng)式數(shù)據(jù)時可以獲取到原值
既要指明監(jiān)視的屬性,也要指明監(jiān)視的回調(diào)
watchEffect
自動收集依賴數(shù)據(jù),依賴數(shù)據(jù)更新時重新執(zhí)行自身
立即執(zhí)行,沒有惰性,頁面的首次加載就會執(zhí)行
無法獲取到原值,只能得到變化后的值
不用指明監(jiān)視哪個屬性,監(jiān)視的回調(diào)中用到哪個屬性就監(jiān)視哪個屬性
watch函數(shù)有兩個小坑:
監(jiān)視reactive定義的響應(yīng)式數(shù)據(jù)(該數(shù)據(jù)為一個對象,因為reactive只能定義數(shù)組或?qū)ο箢愋偷捻憫?yīng)式)時:oldValue無法正確獲取,會強(qiáng)制開啟深度監(jiān)視,deep配置不生效。
監(jiān)視reactive定義的響應(yīng)式數(shù)據(jù)中的某個屬性時,且該屬性是一個對象,那么此時deep配置生效。
具體的watch函數(shù)的用法在下面代碼中都有所體現(xiàn),注釋詳細(xì)
<template> <div> <h3>當(dāng)前求和為:{{sum}}</h3> <button @click="sum++">點我+1</button> <hr> <h3>當(dāng)前的信息為:{{msg}} </h3> <!-- 點擊button拼接! --> <button @click="msg+='!'">修改數(shù)據(jù)</button> <hr> <h3>姓名:{{person.name}}</h3> <h3>年齡:{{person.age}}</h3> <h3>薪資:{{person.job.j1.salary}}</h3> <button @click="person.name+='~'"> 修改姓名</button> <button @click="person.age++"> 增長年齡</button> <button @click="person.job.j1.salary++"> 增長薪資</button> </div> </template> <script> import {ref,reactive,watch,watchEffect} from 'vue' export default { name:'demo', setup(){ //數(shù)據(jù) let sum = ref(0) let msg = ref('hello') let person = reactive({ name:'zhangsan', age:'18', job:{ j1:{ salary:20 } } }) //監(jiān)視(三個參數(shù),第一個是監(jiān)視的對象,第二個是監(jiān)視的回調(diào)函數(shù),第三個是監(jiān)視的配置) //情況一:監(jiān)視ref所定義的一個響應(yīng)式數(shù)據(jù) watch(sum,(newValue,oldValue)=>{ console.log('sum的值變化了',newValue,oldValue) },{immediate:true,deep:true}) //immediate的值為true時表示非惰性的立即執(zhí)行的(默認(rèn)情況下是false) //deep深層次觸發(fā)(此處設(shè)置deep無意義) //情況二:監(jiān)視ref所定義的多個響應(yīng)式數(shù)據(jù),寫成數(shù)組的形式 watch([sum,msg],(newValue,oldValue)=>{ console.log('sum或者msg變了',newValue,oldValue) }) //情況三:監(jiān)視reactive所定義的響應(yīng)式數(shù)據(jù) //若監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù),則無法正確獲得oldValue //若監(jiān)視的是reactive定義的響應(yīng)式數(shù)據(jù),則watch會強(qiáng)制開啟深度監(jiān)視 //我們發(fā)現(xiàn)改變person的任意一個屬性都會被監(jiān)視到 watch(person,(newValue,oldValue)=>{ console.log('person改變了',newValue,oldValue) }) //我們嘗試設(shè)置deep:false,關(guān)閉深度監(jiān)聽(目的:改變job的值不會被watch監(jiān)聽到) //但是我們發(fā)現(xiàn)deep:false并沒有生效,原因是此時watch監(jiān)視的是reactive定義的響應(yīng)式對象,默認(rèn)強(qiáng)制開啟了深度監(jiān)聽 watch(person,(newValue,oldValue)=>{ console.log('person改變了',newValue,oldValue) },{deep:false}) //情況四:監(jiān)視reactive所定義的響應(yīng)式數(shù)據(jù)中的某個屬性 watch(()=>person.name,(newValue,oldValue)=>{ console.log('person的job改變了',newValue,oldValue) }) watch(()=>person.age,(newValue,oldValue)=>{ console.log('person的job改變了',newValue,oldValue) }) watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job改變了',newValue,oldValue) }) //從上邊我們發(fā)現(xiàn)改變name,age都會觸發(fā)監(jiān)聽,但是改變job不會 //這是因為name和age屬性的值只是一個簡單的基本類型數(shù)據(jù), //而job屬性的值是一個對象,比較深,想要監(jiān)視到,就要開啟深度監(jiān)視,程序如下: watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job改變了',newValue,oldValue) },{deep:true})//此時job改變,會被監(jiān)視到,此處的deep配置生效 //需要和情況三進(jìn)行區(qū)分,此處watch監(jiān)視的是reactive所定義的對象中的某個屬性,而情況三watch監(jiān)視的是reactive所定義的對象 //情況五:監(jiān)視reactive所定義的響應(yīng)式數(shù)據(jù)中的某些屬性,寫成數(shù)組的形式 watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ console.log('person的name或age改變了',newValue,oldValue) }) //返回一個對象(常用) return{ sum, msg, person } } } </script>
watch取消監(jiān)聽
const stop1 = watch( [() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, "----", prevName, curEng); setTimeout(() => { stop(); }, 5000); });
函數(shù)用法如下代碼所示,注釋詳細(xì):
<template> <div> <h3>當(dāng)前求和為:{{sum}}</h3> <button @click="sum++">點我+1</button> <hr> <h3>當(dāng)前的信息為:{{msg}} </h3> <!-- 點擊button拼接! --> <button @click="msg+='!'">修改數(shù)據(jù)</button> <hr> <h3>姓名:{{person.name}}</h3> <h3>年齡:{{person.age}}</h3> <h3>薪資:{{person.job.j1.salary}}</h3> <button @click="person.name+='~'"> 修改姓名</button> <button @click="person.age++"> 增長年齡</button> <button @click="person.job.j1.salary++"> 增長薪資</button> </div> </template> <script> import {ref,reactive,watch,watchEffect} from 'vue' export default { name:'demo', setup(){ //數(shù)據(jù) let sum = ref(0) let msg = ref('hello') let person = reactive({ name:'zhangsan', age:'18', job:{ j1:{ salary:20 } } }) //watchEffect函數(shù)內(nèi)部所指定的回調(diào)中用到的數(shù)據(jù)只要發(fā)生變化,就會重新執(zhí)行回調(diào) //只有一個參數(shù),就是回調(diào) watchEffect(()=>{ const x1 = sum.value//因為sum是ref定義的響應(yīng)式數(shù)據(jù),需要使用.value調(diào)用 const x2 = person.age console.log('watchEffect配置的回調(diào)執(zhí)行了') }) return{ sum, msg, person } } } </script>
watchEffect取消監(jiān)聽
const stop = watchEffect(() => { console.log(nameObj.name); setTimeout(() => { stop(); }, 5000);});
watchEffect與computed有點像:
但是computed注重的計算出來的值(回調(diào)函數(shù)的返回值),所以必須要寫返回值。
而watchEffect更注重的是過程(回調(diào)函數(shù)的函數(shù)體),所以不用寫返回值。
computed若是值沒有被使用時不會調(diào)用,但是watchEffect始終會調(diào)用一次
舉例:
<template> <div> <h3>當(dāng)前求和為:{{sum}}</h3> <button @click="sum++">點我+1</button> <hr> <h3>當(dāng)前的信息為:{{msg}} </h3> <!-- 點擊button拼接! --> <button @click="msg+='!'">修改數(shù)據(jù)</button> <hr> <h3>姓名:{{person.name}}</h3> <h3>年齡:{{person.age}}</h3> <h3>薪資:{{person.job.j1.salary}}</h3> <button @click="person.name+='~'"> 修改姓名</button> <button @click="person.age++"> 增長年齡</button> <button @click="person.job.j1.salary++"> 增長薪資</button> </div> </template> <script> import {ref,reactive,watch,watchEffect, computed} from 'vue' export default { name:'demo', setup(){ //數(shù)據(jù) let sum = ref(0) let msg = ref('hello') let person = reactive({ name:'zhangsan', age:'18', job:{ j1:{ salary:20 } } }) let person1 = reactive({ firstName:'張', lastName:'三' }) //computed //計算屬性——簡寫(沒有考慮計算屬性被修改的情況) person1.fullName = computed(()=>{ //必須含有返回值 return person1.firstName+'-'+person1.lastName }) //計算屬性——完整寫法(考慮讀和寫) person1.fullName = computed({ //必須含有返回值 get(){ return person1.firstName+'-'+person1.lastName }, set(value){ const nameArr = value.split('-') person1.firstName = nameArr[0] person1.lastName = nameArr[1] } }) //watchEffect //可以不寫給返回值 watchEffect(()=>{ const x1 = sum.value//因為sum是ref定義的響應(yīng)式數(shù)據(jù),需要使用.value調(diào)用 const x2 = person.age console.log('watchEffect配置的回調(diào)執(zhí)行了') }) return{ sum, msg, person, person1 } } } </script>
以上就是“Vue中watch和watchEffect的區(qū)別是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。