Vue3如何使用watch和computed属性实现数据的变更监听和计算

<template>
  <div>
    <input v-model="message" placeholder="编辑我">
    <p>消息: {{ message }}</p>
    <p>反转的消息: {{ reversedMessage }}</p>
  </div>
</template>
 
<script>
import { ref, computed, watch } from 'vue';
 
export default {
  setup() {
    // 响应式状态
    const message = ref('');
 
    // 计算属性响应message的变化
    const reversedMessage = computed(() => message.value.split('').reverse().join(''));
 
    // 监听message的变化
    watch(message, (newValue, oldValue) => {
      console.log(`message changed from ${oldValue} to ${newValue}`);
    });
 
    return {
      message,
      reversedMessage
    };
  }
};
</script>

这个例子展示了如何在Vue 3中使用ref来创建响应式状态，computed来创建计算属性，以及watch来监听响应式状态的变化。用户可以编辑一个输入框的值，这个值会实时显示在屏幕上，同时，它的反转版本也会实时显示。通过控制台的日志，我们可以看到每当message变更时所触发的回调函数。