【Vue3】watch 侦听器

watch用来监听响应式数据变化，比如ref,reactive包裹起来的数据

<template>
  <div>
    <!-- <input v-model="name1" type="text"> -->
    <hr>
    <!-- <input v-model="name2" type="text"> -->
    <hr>
    <input v-model="message.foo.bar.name" type="text">

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
let message = reactive({
  foo: {
    bar: {
      name: 'aaa',
      age: 13
    }
  }
})
// let name1 = ref('aaa');
// let name2 = ref('bbb');
// watch([name1, name2], (newVal, oldVal) => {
//   console.log(newVal,oldVal);
// })

// 如果不使用箭头函数，watch 函数在执行时会捕获到 message 对象本身的变化，而不是其中的 name 属性的变化
watch(() => message.foo.bar.name, (newVal, oldVal) => {
  console.log(newVal, oldVal);
  // 引用类型返回的新值和旧值是一样的
}, {
  deep: true,
  // 使用reactive使不使用deep都是深度监听
  // immediate: true // 开启后直接先执行一次
  // flush: 'pre' // pre 组件更新之前执行，sync 同步执行，post 组件更新之后执行
})
</script>

<style lang="scss" scoped></style>