Vue3(2) watch函数

目录

一、Vue.js 2.x 中的 watch 函数

二、Vue.js 3.x 中的 watch 函数

2.1 监视reactive定义的响应式数据

2.2 监视ref定义的响应式数据

三、watchEffect函数

---

Vue.js 2.x 和 3.x 版本中的 watch 函数在使用方式和部分细节上有所不同。下面分别介绍两个版本的 watch 函数的区别以及 Vue.js 3.x 版本中需要注意的点。

一、Vue.js 2.x 中的 watch 函数

在 Vue.js 2.x 版本中，watch 函数用于监听数据的变化，并在数据变化时触发对应的回调函数。watch 函数有以下常见用法：

监听某个属性变化：

export default {data () {return {count: 0}},watch: {count (newVal, oldVal) {console.log(`count 由 ${oldVal} 变为 ${newVal}`);}}
}

监听多个属性变化：

export default {data () {return {message: '',count: 0}},watch: {message (newVal, oldVal) {console.log(`message 由 ${oldVal} 变为 ${newVal}`);},count (newVal, oldVal) {console.log(`count 由 ${oldVal} 变为 ${newVal}`);}}
}

监听嵌套属性变化：

export default {data () {return {user: {name: '',age: 0}}},watch: {'user.name' (newVal, oldVal) {console.log(`name 由 ${oldVal} 变为 ${newVal}`);},'user.age' (newVal, oldVal) {console.log(`age 由 ${oldVal} 变为 ${newVal}`);}}
}

在监听属性变化的同时执行某些动作：

export default {data () {return {count: 0}},watch: {count (newVal, oldVal) {console.log(`count 由 ${oldVal} 变为 ${newVal}`);this.doSomething();}},methods: {doSomething () {// 在 count 变化的同时执行一些操作}}
}

二、Vue.js 3.x 中的 watch 函数

在 Vue.js 3.x 版本中，watch 函数在使用方式上和 2.x 版本有所不同。Vue.js 3.x 通过 watchEffect() 和 watch() 函数来替代 Vue.js 2.x 中的 watch 函数。下面是 Vue.js 3.x 的 watch 函数的一些特性和注意点：

2.1 监视reactive定义的响应式数据

• 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）

watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

• 监视reactive定义的响应式数据中的某个属性

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

• 监视reactive定义的响应式数据中的某些属性

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

• 特殊情况（有三层结构或者更多层结构）

//特殊情况 job下面还有更深层次
watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive中定义的对象中的某个属性，所以deep配置有效

2.2 监视ref定义的响应式数据

• 监视ref定义的响应式数据

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)
},{immediate:true})

• 如果用ref定义了一个对象

watch(person.value,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)
}) 

或者这样：

watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)
},{deep: true}) 

• 监视多个ref定义的响应式数据

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{console.log('sum或msg变化了',newValue,oldValue)
}) 

三、watchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

1. 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
2. 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{const a = sum.valueconst b = person.ageconsole.log('watchEffect配置的回调执行了')
})