一文詳解Vue中watch和watchEffect的區別
- 藏色散人轉載
- 2022-08-09 15:20:392465瀏覽
前言
watch函數與watchEffect函數都是監聽器，在寫法和用法上有一定區別，是同一功能的兩種不同形態，底層都是一樣的。 【相關推薦：vue.js影片教學】
#watch與watchEffect的比較
watch
- ##watch
明確指定依賴數據，依賴數據更新時執行回呼函數 具有一定的惰性lazy 第一次頁面展示的時候不會執行，只有數據變化的時候才會執行(設定 - immediate: true
時可以變成非惰性，頁面首次載入就會執行）監視ref定義的響應式資料時可以取得原值 - 既要指明監視的屬性，也要指明監視的回呼
watchEffect
自動收集依賴數據，依賴數據更新時重新執行自身- 立即執行，沒有惰性，頁面的首次載入就會執行
- 無法取得原值，只能得到變化後的值
不用指明監視哪個屬性，監視的回呼中用到哪個屬性就監視哪個屬性
- ##監視reactive定義的響應式數據（該資料為一個對象，因為reactive只能定義數組或對象類型的響應式）時：oldValue無法正確獲取，會強制開啟深度監視，deep配置不生效。
- 監視reactive定義的響應式資料中的某個屬性時，且該屬性是對象，那麼此時deep配置生效。
<template>
<div>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我+1</button>
<hr>
<h2>当前的信息为：{{msg}} </h2>
<!-- 点击button拼接！ -->
<button @click="msg+='!'">修改数据</button>
<hr>
<h2>姓名：{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪资：{{person.job.j1.salary}}</h2>
<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>
const stop1 = watch(
[() => nameObj.name, () => nameObj.name],
([curName, curEng], [prevName, curEng]) => {
console.log(curName, curEng, "----", prevName, curEng);
setTimeout(() => {
stop();
}, 5000);
});深度解析watchEffect函數
<template>
<div>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我+1</button>
<hr>
<h2>当前的信息为：{{msg}} </h2>
<!-- 点击button拼接！ -->
<button @click="msg+='!'">修改数据</button>
<hr>
<h2>姓名：{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪资：{{person.job.j1.salary}}</h2>
<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>
const stop = watchEffect(() => {
console.log(nameObj.name);
setTimeout(() => {
stop();
}, 5000);});watchEffect與computed
watchEffect與computed有點像：
- 但是computed注重的計算出來的值（回呼函數的回傳值），所以必須要寫回傳值。
- 而watchEffect比較注重的是過程（回呼函數的函數體），所以不用寫回傳值。
- computed若是值沒有被使用時不會調用，但是watchEffect總是會調用一次
- 範例：
<template>
<div>
<h2>当前求和为：{{sum}}</h2>
<button @click="sum++">点我+1</button>
<hr>
<h2>当前的信息为：{{msg}} </h2>
<!-- 点击button拼接！ -->
<button @click="msg+='!'">修改数据</button>
<hr>
<h2>姓名：{{person.name}}</h2>
<h2>年龄:{{person.age}}</h2>
<h2>薪资：{{person.job.j1.salary}}</h2>
<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的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！