当前位置：首页 > news >正文

Vue3-ref、reactive函数的watch

news 2025/8/3 2:33:29

Vue3-ref、reactive函数的watch

ref函数的watch

原理：监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码。
watch 属性中的数据需要具有响应式
watch 属性可以使用箭头函数
watch 属性可以监视一个或者多个响应式数据，并且可以配置 immediate(立即执行) 和 deep(深度侦听)搭配使用

// 监视一个响应式数据
watch(监视的数据, (newValue, oldValue) => { ... }, {immediate : true, deep : true})// 监视多个响应式数据
// 第一种 有多少个监视数据就写多少个watch
watch(监视的数据1, (newValue, oldValue) => { ... }, {immediate : true, deep : true})
watch(监视的数据2, (newValue, oldValue) => { ... }, {immediate : true, deep : true})// 第二种 数组形式
watch([监视的数据1, 监视的数据2], (newValue, oldValue) => { ... }, {immediate : true, deep : true})

// App.vue
<template><h2>计数器1：{{counter1}}</h2><h2>计数器2：{{counter2}}</h2><button @click="counter1++">计数器1加1</button><br><button @click="counter2++">计数器2加1</button>
</template><script>import { watch, ref } from 'vue'export default {namme : 'App',setup(){let counter1 = ref(1)let counter2 = ref(100)watch(counter1, (newValue, oldValue) => {console.log('计数器1', newValue, oldValue);})watch(counter2, (newValue, oldValue) => {console.log('计数器2', newValue, oldValue);})// 采用数组的方式，一次性监视多个属性watch([counter1, counter2], (newValue, oldValue) => {console.log(newValue, oldValue);})return {counter, counter2}}}
</script>

reactive函数的watch

reactive函数在 watch 属性中的注意事项：
- 当watch中的侦听数据是reactive函数的一个对象时：
  - 在watch中是无法获取到oldValue的，只能获取到newValue。
  - 在没使用箭头函数的基础上，watch 属性默认开启deep(深度侦听)的，并且deep无法被取消，即便是在watch 属性的末尾加上 {deep : false} 也没有用。
  - 使用箭头函数调用对象，虽然无法获取oldValue，但是deep设置有效
- 当watch中的侦听数据是reactive函数的是基本数据类型时：
  - 在watch中侦听基本数据类型，需要使用箭头函数
  - 使用箭头函数调用基本数据类型，才能获取到oldValue
watch 属性可以监视一个或者多个响应式数据

// 监视一个对象
// 不使用箭头函数，deep设置无效，oldValue获取不到
watch(对象, (newValue, oldValue) => { ... }, {immediate : true})// 使用箭头函数，oldValue获取不到，deep设置有效
watch(() => 对象, (newValue, oldValue) => { ... }, {immediate : true, deep : false})// 监视一个基本数据类型 使用箭头函数，获取到oldValue
watch(() => 基本数据类型, (newValue, oldValue) => { ... })// 监视多个 数组形式，使用箭头函数，获取到oldValue
watch([() => 基本数据类型, () => 基本数据类型], (newValue, oldValue) => { ... })

// App.vue
<template><h2>计数器1：{{data.counter1}}</h2><h2>计数器2：{{data.a.counter2}}</h2><button @click="data.counter1++">计数器1加1</button><br><button @click="data.a.counter2++">计数器2加1</button>
</template><script>import { reactive, watch } from 'vue'export default {name : 'App',setup(){let data = reactive({counter1 : 1,a : {counter2 : 100}})// data是一整个对象，oldValue是拿不到的，默认开启deep（deep设置无效）watch(data, (newValue, oldValue) => {console.log(newValue, oldValue);}, {deep : false})// data.counter1是一个基本数据类型，可以获取到oldValuewatch(() => data.counter1, (newValue, oldValue) => {console.log(newValue, oldValue);})// data.a是一个对象，deep设置有效，oldValue无法获取watch(() => data.a, (newValue, oldValue) => {console.log(newValue, oldValue);}, {deep : false})// data.a.counter2是基本数据类型，可以获取oldValuewatch(() => data.a.counter2, (newValue, oldValue) => {console.log(newValue, oldValue);})// data.counter1 和 data.a.counter2是基本数据类型，数组形式，可以获取oldValuewatch([() => data.counter1, () => data.a.counter2], (newValue, oldValue) => {console.log(newValue, oldValue);})return {data}}}
</script>