computed 是「派生状态」：const total = computed(() => price.value * count.value)。它带缓存——依赖不变时多次读取只算一次，依赖变了才重算，这是它相对.methods 的核心优势。模板里的复杂表达式都应该用 computed 替代。
watch 是「数据变了做点什么」：const stop = watch(n, (nv, ov) => {...})。典型场景：监听请求参数变化去请求接口、监听开关状态改 document.title。watch 默认懒执行（仅变化时触发）、深度监听对象要 { deep: true }、想立即执行一次加 { immediate: true }。记住分工：派生显示用 computed，异步/副作用用 watch。
<div id="app"> <input v-model="price"> × <input v-model="count"> <p>合计 {{ total }}</p> <!-- computed 缓存 --> </div> <script> const { createApp, ref, computed, watch } = Vue; createApp({ setup() { const price = ref(10), count = ref(2); // 派生状态：price/count 不变时 total 只计算一次 const total = computed(() => price.value * count.value); // 副作用：合计超 100 就提示 watch(total, nv => { if (nv > 100) console.warn('超出预算:', nv); }, { immediate: true }); // 立即先执行一次 return { price, count, total }; }, }).mount('#app'); </script>