计算属性
计算属性（computed）根据响应式数据派生新值，并缓存结果：依赖不变时多次读取只算一次，依赖变了才重算。模板里写复杂表达式的地方都应该换成计算属性——模板保持简单，逻辑可复用。
与方法的区别：methods 每次渲染都重新执行，无缓存；computed 有缓存且按依赖追踪。与侦听器的区别：computed 是「派生值」，watch 是「做副作用」（发请求、改别的数据）。
- computed 缓存：依赖不变不重算，性能优于 methods
- 必须返回值，且不应在里做副作用（不要发请求、改依赖）
- setter 可选：读写双向计算（如 fullName 的 get/set）
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <input v-model="firstName" placeholder="姓"> <input v-model="lastName" placeholder="名"> <p>全名：{{ fullName }}</p> <p>总价：{{ total }} 元（单价 {{ price }} × {{ qty }}）</p> <button @click="qty++">加购</button> </div> <script> const { createApp, ref, computed } = Vue; createApp({ setup() { const firstName = ref('张'); const lastName = ref('三'); const price = ref(99); const qty = ref(2); // 派生值 + 缓存：firstName/lastName 不变就不重算 const fullName = computed(() => firstName.value + lastName.value); const total = computed(() => price.value * qty.value); return { firstName, lastName, fullName, price, qty, total }; } }).mount('#app'); </script> </body> </html>
本节要点computed = 带缓存的派生值：依赖变了才算，复杂表达式都该交给它。
