使用watch的几种写法

使用watch的几种写法

vue2中watch的写法：
第一种：

 watch: {
    list(newValue, oldValue) {
    }
  },

第二种：监听的数据后面写成对象形式，包含handler方法和immediate，

 watch: {
    list: {
      handler(newName, oldName) {
      },
    deep: true,
    immediate: true
    }
}

immediate：该属性表示在watch中首次绑定的时候，是否执行handler，不写此属性时为默认值false，在数据发生变化的时候才执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，当prop有值时，即有组件传值时需要将immediate置为true。
deep：当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
第三种：写一个监听处理函数，当监听的对象发生变化时执行监听处理函数

watch: {
    list: 'editList'
    }
 } 
 methods：{
 editList(){}
 }

vue3中watch的写法：

vue3中的写法与vue2不同，vue3 watch写在setup中，使用之前，还需要先导入该组件import { watch } from 'vue'
vue3中的watch 默认是深度监听，无需再手动指定 deep 。
setup中可以有多个watch

 setup () {
   let name = ref('rose');
   let age = ref(5);
   let obj= reactive({
      name: 'gg',
      age: 18,
      job: {
        sary: 6
      }
    })
   //第一种：监听一个响应式对象
    watch( name, () => {
    console.log(name.value)
    })
    //第二种：监听对象的某个值
     watch( () => name.value, () => {
      console.log('只监听 value ', name.value);
    })
    //第三种：带参数的单一属性监听
    watch(name, (newvAL, oLdVal) => {
      console.log(newvAL, oLdVal)
    })
    //第四种：监听多个属性变化
     watch([name, age], (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })
    watch([() =>obj.name, ()=> obj.age], (newVal, oldVal)=> {
      console.log(newVal, oldVal)
    })
    
}

监听reactive中数据的变化，此时无法正确获取oldVal的变化，深度监听无用,需要手动添加deep: true

watch([() => obj.job], (newVal, oldVak) => {
      console.log(newVal, oldVak)
    }, {deep: true})