Vue3中监听器watchEffect的使用

 总结代码：

一进页面就开始监听

<template><div>数量——{{ count }}</div><div>姓名——{{ nickname }}</div><button @click="changecount">+</button><button @click="changenickname">改名</button><div>姓名：{{ userInfo.name }}</div><div>年龄：{{ userInfo.age }}</div><button @click="changeusername">改对象名</button><button @click="changeuserage">改年龄</button><button @click="stop()">停止监听</button>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue';
const count = ref(0) //数量
const nickname = ref('张三')//姓名
// 对象
const userInfo = ref({name: 'zs',age: 18
})
// 改数量
const changecount = () => {count.value++
}
// 改姓名
const changenickname = () => {nickname.value = '李四'
}
// 改对象姓名
const changeusername = () => {userInfo.value.name = '李四'
}
// 改对象年龄
const changeuserage = () => {userInfo.value.age = '20'
}// 使用watchEffect监听 一进页面就监听 
const stop = watchEffect(() => {console.log('数量:', count.value);console.log('姓名:', nickname.value);console.log('对象单个数据:', userInfo.value.name);console.log('整个对象变化:', JSON.stringify(userInfo.value));oninvalidata(() => {console.log('监听前处理一些事情');})
});
</script>

获取监听dom元素

 <div ref="numcom">数量——{{ count }}</div>

 使用flush获取dom元素 post：dom加载完获取

// 使用watchEffect监听 
const stop = watchEffect((oninvalidata) => {console.log(numcom.value);oninvalidata(() => {console.log('监听前处理一些事情');})
}, {flush: 'post'
});