Vue2迁移到Vue3：（五）watch

对比两个示例代码，很容易看出写法的改变：Vue 3 中的 watch 侦听器使用了更简洁的函数形式，并且需要使用 ref 来创建响应式数据。

一、Vue2

export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      // 侦听 message 的变化
      console.log('New value: ' + newValue);
      console.log('Old value: ' + oldValue);
    }
  }
};

二、Vue3

import { watch, ref } from 'vue';

export default {
  setup() {
    const message = ref('');

    watch(message, (newValue, oldValue) => {
      // 侦听 message 的变化
      console.log('New value: ' + newValue);
      console.log('Old value: ' + oldValue);
    });

    return {
      message
    };
  }
};