watch
<template>
<div class="container">
case1: <input type="text" v-model="message">
<hr>
case2: <input type="text" v-model="notice.foo.bar.name">
<hr>
watchEffect:<input type="text" v-model="effects">
</div>
</template>
<script setup lang='ts'>
import { reactive, ref, watch, watchEffect } from 'vue'
let message = ref<string>('起飞')
let notice = ref({
foo:{
bar:{
name:"起飞2"
}
}
})
watch(message,(newVal,oldVal) => {
console.log('新'+ newVal,'旧'+ oldVal)
})
watch(() => notice.value.foo.bar.name,(newVal,oldVal) => {
console.log('新'+ newVal,'旧'+ oldVal)
},{
deep:true,
})
let effects = ref<string>('哈哈哈')
watchEffect((oninvalidate) => {
oninvalidate(()=>{
console.log(2);
})
console.log('effects',effects.value);
})
</script>
<style lang="scss" scoped>
</style>