vue3 watch 用法

发布时间 2023-10-25 13:53:21作者: mingBolg
<script setup>
    import { ref,computed,watch } from 'vue'
     
      const num = ref(1)
      const name = ref('ming')
      const obj = ref({name:'小明',age:30})
      //watch  简单类型
      // watch(num,(newValue,oldValue) => {
      //   console.log(newValue,oldValue) 
      // })

      //watch  简单类型 复杂类型
      // watch([num,name],(newValue,oldValue) => {
      //   console.log(newValue,oldValue,9900) 
      // })  

      //立即执行和侦听所有属性
      //  watch(obj,(newValue,oldValue) => {
      //   console.log(newValue,oldValue,9900) 
      // },{immediate:true,deep:true})  

      //精确侦听 对象中的某个属性
      watch(()=>obj.value.age,(newValue,oldValue)=>{
        console.log(newValue,oldValue,9900) 
      })



</script>

<template>
  
   <!-- <div style="float:left;width: 100%;">{{ num }}</div><br> -->
   <button @click="obj.age++" >{{obj.age}}</button>
   <button @click="num--" >按钮--</button>
</template>

<style scoped>
 
</style>