computed与直接计算的区别

computed：computed 是计算属性，用来基于响应式数据进行缓存计算。

watch：watch 是观察者，用于监听响应式数据的变化，并在数据变化时执行回调操作.不仅是为了监听数据变化，还可以在数据变化时执行副作用操作

computed的计算方法

<template><div><p>{{ fullName }}</p><input v-model="firstName" /></div>
</template><script setup>
import { ref, computed } from "vue";// 响应式数据
const firstName = ref("1");// 使用 computed 创建计算属性
const fullName = computed(() => {return `${firstName.value * 2}`;
});
</script>

 直接计算

(每次组件更新时，都会重新计算这个表达式,不能复用)

<template><div><p>{{ firstName * 2 }}</p><input v-model="firstName" /></div>
</template><script setup>
import { ref } from "vue";// 响应式数据
const firstName = ref("1");
</script>

watch(打印新值和旧值,随着数据的改变触发)

<template><div><p>{{ message }}</p><button @click="changeMessage">Change Message</button></div>
</template><script setup>
import { ref, watch } from "vue";// 响应式数据
const message = ref("Hello, Vue 3!");// 修改 message 的函数
const changeMessage = () => {message.value = "Hello, Watcher!";
};// 使用 watch 来监听 message 的变化
watch(message, (newValue, oldValue) => {console.log("变化:", oldValue, newValue);
});
</script>