Vue3 watch监听

watch主要作用是侦听一个或多个数据的变化，数据变化时执行的回调函数

<template>
  <div>
    <input type="text" v-model="userName" placeholder="监听单个ref的值">
    <br>
    <input type="text" v-model="passWord" placeholder="监听多个ref的值">
    <br>
    <input type="text" v-model="obj1.a.b.c" placeholder="深度监听">
    <br>
    <input type="text" v-model="obj2.foo.bar.name" placeholder="监听reactive对象单个属性">
    <br>
    <input type="text" v-model="num" placeholder="immediate初始化立即执行">
    <br>
    <input type="text" v-model="state" placeholder="flush">
  </div>
</template>
<script setup>
import { ref,reactive,watch } from 'vue'

const userName = ref('')
const passWord = ref('')
const num = ref(null)
const state = ref(0)
const obj1 = ref({
  a:{
    b:{
      c:''
    }
  }
})
const obj2 = reactive({
  foo: {
    bar: {
      name: ''
    }
  }
})

//监听单个ref的值
watch(userName,(val)=>{
  console.log(val);
})

//监听多个ref的值
watch([userName,passWord],(val)=>{
  console.log(val);
})

//深度监听
//如果用ref定义，侦听的时候需要开启深度侦听
//如果用reactive定义，开启deep和不开启deep效果是一样的
watch(obj1,(val)=>{
  console.log(val);
},{
  deep:true
})

//监听reactive对象单个属性
watch(()=>obj2.foo.bar.name,(val)=>{
  console.log(val);
})

//immediate会将watch的回调函数在组件创建时立即执行了一次
watch(num,(val)=>{
  console.log(val);
},{
  immediate:true
})

//flush
//sync：同步模式下执行
//pre：在数据变化之前执行回调函数
//post：在数据变化之后执行回调函数，但是需要等待所有依赖项都更新后才执行
watch(state,(val)=>{
  console.log(val);
},{
  flush:'pre'
})
state.value++
</script>

注：本人前端小白 ，如有不对的地方还请多多指教