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'
});