vue2和vue3 watch监听方法区别

vue2

<template>
  <div>
    <div>{{ obj.name }}</div>
    <div>{{ obj.army }}</div>
    <div>{{ obj.office }}</div>
    <div>{{ obj.subordinate.dixi }}</div>
    <div>{{ obj.subordinate.zhengdi }}</div>
    <button @click="add1945">1945年成为中华民国第一位民选总统</button> <br />
    <button @click="add1946">一年以后下野,由李宗仁为代总统</button><br />
    <button @click="adddixi" v-if="obj.name !== '李宗仁'">
      收编一个嫡系得部下
    </button>
    <br />
    <br />
    <br />
    <br />
    <br />
    <div>{{ num }}</div>
    <button @click="addNum">增加</button>
  </div>
</template>

<script>
export default {
  name: 'watch',
  data () {
    return {
      obj: {
        name: '蒋介石',
        army: '中央军',
        office: '黄埔军校校长',
        // 部下
        subordinate: {
          dixi: '杜聿明,关麟征,李玉堂,王耀武',
          zhengdi: '阎锡山,李宗仁,白崇禧,冯玉祥,汪精卫'
        }
      },
      num: 0
    }
  },
  watch: {
    //当监听是一个对象的时候,deep是深度监听,immediate是默认进来就监听,handler是函数方法
    obj: {
      handler (newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
      deep: true,
      immediate: true
    },
    //当监听一个对象具体的某个属性的时候,属性写成字符串
    'obj.office': {
      handler (newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
    },
    //当监听一个基本类型属性的时候
    num (newVal, oldVal) {
      console.log(newVal)
      console.log(oldVal)
    }
  },
  methods: {
    add1945 () {
      this.obj.name = '蒋介石'
      this.obj.office = '中华民国总统'
      this.obj.army = '中央军'
    },
    add1946 () {
      this.obj.name = '李宗仁'
      this.obj.office = '中华民国代总统'
      this.obj.army = '桂军'
    },
    adddixi () {
      this.obj.subordinate.dixi = this.obj.subordinate.dixi + ',薛岳'
    },
    addNum () {
      this.num++
    }
  }
}
</script>

<style>
</style>

vue3

<template>
  <div>{{ num }}</div>
  <button @click="add">添加</button>
  <div>{{ obj.name }}</div>
  <div>{{ obj.army }}</div>
  <div>{{ obj.office }}</div>
  <div>{{ obj.subordinate.dixi }}</div>
  <div>{{ obj.subordinate.zhengdi }}</div>
  <button @click="add1945">1945年成为中华民国第一位民选总统</button><br />
  <button @click="add1946">一年以后下野,由李宗仁为代总统</button><br />
  <button @click="adddixi">收编一个嫡系得部下</button>
</template>

<script>
import { watch, ref, reactive } from 'vue'
export default {
  name: 'Watch',
  setup () {
    const num = ref(0)
    const obj = reactive({
      name: '蒋介石',
      army: '中央军',
      office: '黄埔军校校长',
      // 部下
      subordinate: {
        dixi: '杜聿明,关麟征,李玉堂,王耀武',
        zhengdi: '阎锡山,李宗仁,白崇禧,冯玉祥,汪精卫'
      }
    })

    watch(num, (newVal, oldVal) => {
      console.log(newVal)
      console.log(oldVal)
    })

    //1. 监听整个对象
    watch(obj, (newValue, oldValue) => {
      console.log('watch 已触发', newValue)
    })

    //2. 监听对象中的某个属性
    watch(() => obj.name, (newValue, oldValue) => {
      console.log('watch 已触发', newValue)
    })

    //3. 只监听对象的子属性
    watch(() => ({ ...obj }), (newValue, oldValue) => {
      console.log('watch 已触发', newValue)
    })

    // 4. 监听对象的所有属性
    watch(() => obj, (newValue, oldValue) => {
      console.log('watch 已触发', newValue)
    }, { deep: true })

    // vue3中可以同时监听好几个属性
    // 注意，此时的第一个参数是一个数组，且第二参数箭头函数的参数也是数组的形式。
    watch([() => obj.name, num], ([newName, newNum], [oldName, oldNum]) => {
      console.log('watch 已触发: name', newName)
      console.log('watch 已触发: nums', newNum)
    })

    const add = () => {
      num.value++
    }

    const add1945 = () => {
      obj.office = '中华民国总统'
    }

    const add1946 = () => {
      obj.name = '李宗仁'
    }

    const adddixi = () => {

    }

    return {
      num,
      add,
      obj,
      add1945,
      add1946,
      adddixi
    }
  }

}
</script>

<style>
</style>

vue2需要把所有的监听方法全部写在watch:{}对象里

vue3可以在setup里面写多个watch属性，还可以在一个watch函数里面监听几个属性