开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天
watch监听：
watch用来监听数据的响应式变化，监听某个数据发生了变化之后执行相应的函数。
同步异步场景都可以使用，一个数据影响多个数据。
vue3允许多个watch监听器存在
watch的传参：
watch(监听的数据，副作用函数，配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})
watch有两个参数：
1.第一个参数是监听的数据对象，可以是单一变量、数组、函数
2.第二个参数是数据改变时的回调函数，第1个参数是改变后的值，第2个参数是改变前的值
- watch监听ref
- 第一个参数只需要写其变量名
<template>
<div class="home">
<input type="text" v-model="name">
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const name = ref(2)
watch(name,(newValue, oldValue)=>{
console.log(newValue, oldValue)
})
</script>
- watch监听data源返回的getter函数
- 第一个参数是函数
<template>
<div class="home">
<input type="text" v-model="state.age"/>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const state = reactive({age: 11})
watch(()=>state.age,(newValue, oldValue)=>{
console.log(newValue, 'newValuestate.age', oldValue, 'oldValuestate.age')
})
</script>
- watch监听多个值
<template>
<div class="home">
<input type="text" v-model="name1">
<input type="text" v-model="state1.name1" />
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const name1 = ref('这是老数据')
const state1 = reactive({name1: '老数据'})
// watch参数：第一个参数是数组，数组中是个多源，ref定义的变量以及data源返回的getter函数
// 第二个参数是回调函数，回调函数中有两个参数，第1个是改变后的值，第二个参数是改变前的值
watch([name1, ()=>state1.name1],([newName, stateName],[oldName, oldStateName])=>{
console.log(newName, stateName)
console.log(oldName, oldStateName)
})
</script>
- watch监听proxy数据
1.vue3将强制开启deep深度监听
2.当监听值为proxy对象时，oldValue值与newValue相同。
<template>
<div class="home">
<input type="text" v-model="state.name">
</div>
</template>
<script setup lang="ts">
import { reactive, watch } from "vue";
const state = reactive({name: ''})
// 1.监听对象
watch(state,(newValue, oldValue)=>{
console.log(newValue, oldValue)
}, {deep: true})
// 2.监听proxy数据其中某个属性
// 第一个参数为函数形式，否则vue3无法监听监听对象的属性变化
// 当监听proxy对象的属性为复杂数据类型时，需开启deep深度监听
watch(() => state.name,(newValue, oldValue) => {
console.log(newValue,oldvalue);
},{deep: true})
</script>
