Vue3-ref、reactive函数的watch

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是一个基本数据类型，可以获取到oldValue watch(() => 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是基本数据类型，可以获取oldValue watch(() => data.a.counter2, (newValue, oldValue) => { console.log(newValue, oldValue); }) // data.counter1 和 data.a.counter2是基本数据类型，数组形式，可以获取oldValue watch([() => data.counter1, () => data.a.counter2], (newValue, oldValue) => { console.log(newValue, oldValue); }) return {data} } } </script>