watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用
watch第一个参数监听源
watch第二个参数回调函数cb(newVal,oldVal)
watch第三个参数一个options配置项是一个对象{undefined
immediate:true //是否立即调用一次
deep:true //是否开启深度监听
}
监听Ref案例
<template>
<div>
<input v-model="message" type="text" />
</div>
</template>
<script setup lang="ts">
import { watch, reactive, ref } from "vue";
let message = ref<string>('')
watch(message,(newVal,oldVal)=>{
console.log('新的',newVal);
console.log('旧的',oldVal);
})
</script>
<style scoped>
</style>
监听多个ref(变成数组了)
<template>
<div>
<input v-model="message" type="text" />
<input v-model="message2" type="text" />
</div>
</template>
<script setup lang="ts">
import { ref, watch, reactive } from "vue";
let message = ref("");
let message2 = ref("");
watch([message, message2], (newVal, oldVal) => {
console.log("新的值----", newVal);
console.log("旧的值----", oldVal);
});
</script>
<style scoped>
</style>
监听Reactive
import { ref, watch ,reactive} from 'vue'
let message = reactive({
nav:{
bar:{
name:""
}
}
})
watch(message, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
})
案例2 监听reactive 单一值
import { ref, watch ,reactive} from 'vue'
let message = reactive({
name:"",
name2:""
})
watch(()=>message.name, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
})