vue3 watch监听测试

<script setup lang="ts">
import { ref, reactive, watch, watchEffect } from "vue";

let message = ref({
  foo: {
    bar: {
      name: "小满",
    },
  },
});
let message2 = ref<string>("小满");
watchEffect(() => {
  console.log("message", message2.value);
});
watch(
  [message, message2],
  (newval: string, oldval: string) => {
    console.log(newval, oldval, "监听的值");
  },
  {
    //深度监听
    deep: true,
    // 立即执行一次
    immediate: true,
    // pre组件更新之前调用，sync 同步执行  post 组件更新之后执行
    flush: "pre",
  }
);
</script>

<template>
  <div ref="dom">
    case1:<input type="text" v-model="message.foo.bar.name" />
    <hr />
    case2:<input type="text" v-model="message2" />
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>