我们先来看下vue2里watch的基本使用

        这里我们监听了n值，当n值发生改变时会触发n(){}里面的逻辑。

watch:{
  n(){
    console.log('n变了')
  }
},

接下来我们看下vue3里的watch的使用方法

    首先我们需要在vue里进行引用（感觉越来越像React了呢）

import {  ref, watch } from "vue";

     基本使用，在setup里使用watch形式是函数形式，接收第一个值为：数组形式监听的值，第二个值为执行函数，当监听的值发生变化时执行该函数.（newValue：改变后的值，aldValue：改变前的值），第三个值为深度监视deep或默认执行。

  setup(props,context) {
     const name = ref('前端小哥哥')
     watch([name],(newValue,aldValue)=>{
       console.log('新值：'+newValue,'原值：'+aldValue)
     })

   return {
    name
   };
  },

    执行效果图如下：

监听reactive创建的值

        当我们用监听 ref 的方式来写我们会发现，之前的写法貌似打印出来的数据有问题，我们发现aldValue的值没有正确获取到。

  setup(props,context) {
     const obj = reactive({
       name:'前端小哥哥'
     })

    watch([obj],(newValue,aldValue)=>{
      console.log(newValue,aldValue)
    })
   return {
    obj
    };
  },

而解决这个问题的方式就是写个函数表达式返回这个对象需要监听的某个值

  watch ([() => obj . name ],( newValue , aldValue ) => {

       console . log ( newValue , aldValue )

    }

当我们需要监听深层的数据对象时，则需要开启deep深度监听，当然此时aldValue值确无法正确获取，如需要正确获取则直接监听到mynumber这个值如：obj.age.mynumber

  const obj = reactive({
       name:'前端小哥哥',
       age:{
         mynumber:1
       }
     })

    watch([()=>obj.age],(newValue,aldValue)=>{
      console.log(newValue,aldValue)
    },{deep:true})

效果图：

最后我们再来看一下强大watchEffect函数

    watchEffect和我们的计算属性有点像，里面没有指明监听某个属性，当回调里面使用到某个属性发生改变时就监听某个属性。此时我想你们也想到了如果在watchEffect里监听mynumber的值并且在里面进行改变会不会进入死循环，答案是不会的，在watchEffect里改变了的值是不会进行监听而重复执行的。

  const obj = reactive({
       name:'前端小哥哥',
       age:{
         mynumber:1
       }
     })

watchEffect(()=>{
  console.log('我改变了：',obj.age.mynumber)
})