溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下Vue中watch和watchEffect的區別是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
watch函數與watchEffect函數都是監聽器，在寫法和用法上有一定區別，是同一功能的兩種不同形態，底層都是一樣的。
watch顯式指定依賴數據，依賴數據更新時執行回調函數
具有一定的惰性lazy 第一次頁面展示的時候不會執行，只有數據變化的時候才會執行(設置immediate: true時可以變為非惰性，頁面首次加載就會執行）
監視ref定義的響應式數據時可以獲取到原值
既要指明監視的屬性，也要指明監視的回調
watchEffect自動收集依賴數據，依賴數據更新時重新執行自身
立即執行，沒有惰性，頁面的首次加載就會執行
無法獲取到原值，只能得到變化后的值
不用指明監視哪個屬性，監視的回調中用到哪個屬性就監視哪個屬性
watch函數有兩個小坑：
監視reactive定義的響應式數據（該數據為一個對象，因為reactive只能定義數組或對象類型的響應式）時：oldValue無法正確獲取，會強制開啟深度監視，deep配置不生效。
監視reactive定義的響應式數據中的某個屬性時，且該屬性是一個對象，那么此時deep配置生效。
具體的watch函數的用法在下面代碼中都有所體現，注釋詳細
<template>
<div>
<h3>當前求和為：{{sum}}</h3>
<button @click="sum++">點我+1</button>
<hr>
<h3>當前的信息為：{{msg}} </h3>
<!-- 點擊button拼接！ -->
<button @click="msg+='!'">修改數據</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(){
//數據
let sum = ref(0)
let msg = ref('hello')
let person = reactive({
name:'zhangsan',
age:'18',
job:{
j1:{
salary:20
}
}
})
//監視(三個參數，第一個是監視的對象，第二個是監視的回調函數，第三個是監視的配置)
//情況一：監視ref所定義的一個響應式數據
watch(sum,(newValue,oldValue)=>{
console.log('sum的值變化了',newValue,oldValue)
},{immediate:true,deep:true})
//immediate的值為true時表示非惰性的立即執行的(默認情況下是false)
//deep深層次觸發（此處設置deep無意義）
//情況二：監視ref所定義的多個響應式數據，寫成數組的形式
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum或者msg變了',newValue,oldValue)
})
//情況三：監視reactive所定義的響應式數據
//若監視的是reactive定義的響應式數據，則無法正確獲得oldValue
//若監視的是reactive定義的響應式數據，則watch會強制開啟深度監視
//我們發現改變person的任意一個屬性都會被監視到
watch(person,(newValue,oldValue)=>{
console.log('person改變了',newValue,oldValue)
})
//我們嘗試設置deep:false,關閉深度監聽（目的：改變job的值不會被watch監聽到）
//但是我們發現deep:false并沒有生效，原因是此時watch監視的是reactive定義的響應式對象，默認強制開啟了深度監聽
watch(person,(newValue,oldValue)=>{
console.log('person改變了',newValue,oldValue)
},{deep:false})
//情況四：監視reactive所定義的響應式數據中的某個屬性
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)
})
//從上邊我們發現改變name,age都會觸發監聽，但是改變job不會
//這是因為name和age屬性的值只是一個簡單的基本類型數據，
//而job屬性的值是一個對象，比較深，想要監視到，就要開啟深度監視,程序如下：
watch(()=>person.job,(newValue,oldValue)=>{
console.log('person的job改變了',newValue,oldValue)
},{deep:true})//此時job改變，會被監視到，此處的deep配置生效
//需要和情況三進行區分，此處watch監視的是reactive所定義的對象中的某個屬性，而情況三watch監視的是reactive所定義的對象
//情況五：監視reactive所定義的響應式數據中的某些屬性,寫成數組的形式
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
console.log('person的name或age改變了',newValue,oldValue)
})
//返回一個對象（常用）
return{
sum,
msg,
person
}
}
}
</script>watch取消監聽
const stop1 = watch(
[() => nameObj.name, () => nameObj.name],
([curName, curEng], [prevName, curEng]) => {
console.log(curName, curEng, "----", prevName, curEng);
setTimeout(() => {
stop();
}, 5000);
});函數用法如下代碼所示，注釋詳細：
<template>
<div>
<h3>當前求和為：{{sum}}</h3>
<button @click="sum++">點我+1</button>
<hr>
<h3>當前的信息為：{{msg}} </h3>
<!-- 點擊button拼接！ -->
<button @click="msg+='!'">修改數據</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(){
//數據
let sum = ref(0)
let msg = ref('hello')
let person = reactive({
name:'zhangsan',
age:'18',
job:{
j1:{
salary:20
}
}
})
//watchEffect函數內部所指定的回調中用到的數據只要發生變化，就會重新執行回調
//只有一個參數，就是回調
watchEffect(()=>{
const x1 = sum.value//因為sum是ref定義的響應式數據，需要使用.value調用
const x2 = person.age
console.log('watchEffect配置的回調執行了')
})
return{
sum,
msg,
person
}
}
}
</script>watchEffect取消監聽
const stop = watchEffect(() => {
console.log(nameObj.name);
setTimeout(() => {
stop();
}, 5000);});watchEffect與computed有點像：
但是computed注重的計算出來的值（回調函數的返回值），所以必須要寫返回值。
而watchEffect更注重的是過程（回調函數的函數體），所以不用寫返回值。
computed若是值沒有被使用時不會調用，但是watchEffect始終會調用一次
舉例：
<template>
<div>
<h3>當前求和為：{{sum}}</h3>
<button @click="sum++">點我+1</button>
<hr>
<h3>當前的信息為：{{msg}} </h3>
<!-- 點擊button拼接！ -->
<button @click="msg+='!'">修改數據</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(){
//數據
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定義的響應式數據，需要使用.value調用
const x2 = person.age
console.log('watchEffect配置的回調執行了')
})
return{
sum,
msg,
person,
person1
}
}
}
</script>以上就是“Vue中watch和watchEffect的區別是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
