编写Vue代码，打印属性变化前后的值

在Vue.js中，你可以通过监听`$watch`特性来自定义属性变化的通知。`$watch`是一个响应式对象，它可以让你监视Vue实例的数据，并在数据发生变化时执行自定义函数。

下面是一个简单的例子，展示如何使用`$watch`来打印属性变化前后的值：

<template>
  <div>
    <input v-model="message" />
    <p>Old Value: {{ oldMessage }}</p>
    <p>New Value: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      // 初始化oldMessage为空，后续会自动更新
      oldMessage: null,
    };
  },
  watch: {
    // 观察message的变化
    message(newVal, oldVal) {
      this.oldMessage = oldVal; // 将旧值赋给oldMessage
      console.log('Value changed from', oldVal, 'to', newVal);
    },
  },
};
</script>

在这个例子中，当用户输入框的内容改变时，`message`属性的值会变，`$watch`函数会被触发，旧的值会被保存到`oldMessage`里，并在控制台打印出变化前后的值。