vue2和vue3中的watch

跟大佬们一起探讨一下vue2和vue3中的watch，在学vue的过程中并不理解在什么情况下我会去用到watch，那么watch的作用到底是什么呢？

在开发中我所遇到的一个应用场景就是，在路由参数发生变化时需要进行一些逻辑操作或者进行其它操作

watch: {
  '$route.params.id': {
    immediate: true, // 初始渲染立即执行
    handler(newValue, oldValue) {
      // newValue表示新的值，oldValue表示旧的值可以通过新的值变化来进行一些逻辑操作
    }
  }
}

watch中的属性：

deep属性： （true或false）开启深度监听，当修改的是对象里面的属性时都会触发监听器里面的handler方法进行相应的逻辑操作

immediate属性： 初始立即执行，watch在首次页面加载完时是不会立即执行的当你需要让他首次也进行默认执行的话需要添加immediate属性

handler方法： 回调方法接受两个参数分别为新的值和旧的值

一些简单的示例代码：

wath:{
// num是要监听的数据 函数是监听回调函数
num(newValue,oldValue){
   this.count++
  }
}

// 深度监听
watch:{
	person:{
    handler(newValue,oldValue){
      console.log(newValue,oldValue)
    },
    deep:true,
    immediate:true
  }
}

// 只监听对象某个属性值
watch:{
  "person.name":{
   handler(newValue,oldValue){
     console.log(newValue,oldValue)
    },
  }
}

vue3中的watch写法：

/* watch vue3写法 */
import { watch } from 'vue'

setup(){
  // 监听基本数据类型
  let msg = 'cc'
  watch(msg,(newValue,oldValue)=>{
    
  },{})
  
  // 监听对象中的属性值发生变化
  let obj = ref({
    name:'cc'
  })
  watch(obj,(newValue,oldValue)=>{
    // 此时新旧的值是一样的 因为两个引用地址相同同一时间值相同
  },{
    // 开启深度监听
    deep:true
  })
  
  fn(){
    // 如果是通过reactive定义的不用.value取值
    obj.value.name='aa'
  }
}

注意：

• vue3的watch可以监听数组 vue2不行
• watch 监听多个可以用数组[a,b,c]
• vue3中监听对象中的某个属性时，watch的第一个参数是箭头函数
• vue2中obj添加属性没有响应式而vue3修复了可以直接为响应式对象添加属性