选项式 API：data、方法与计算属性
定义响应式数据，编写由模板调用的方法，并使用计算属性处理会自动更新的派生值。
选项式 API：data、方法与计算属性 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
什么是 Options API
Options API 按选项类型组织组件逻辑：data（响应式状态）、methods（函数）、computed（派生状态）、watch（副作用）和生命周期钩子。每一项都放在一个命名对象属性中。
data 选项
返回一个包含响应式属性的对象。在 data() 中声明的所有属性都是响应式的——Vue 会观察它们，并在它们发生变化时重新渲染模板。
export default {
data() {
return {
message: 'Hello Vue!',
count: 0,
user: null as User | null,
};
}
}methods 选项
可以从模板或其他 methods 中调用的函数。在 methods 内部，this 指向组件实例，并提供对 data 和 computed 属性的访问。
export default {
data() { return { count: 0 }; },
methods: {
increment() {
this.count++; // 'this' is the component instance
},
decrement() {
this.count--;
}
}
}computed 选项
computed 属性根据响应式数据派生值。它们会被缓存——只有依赖项发生变化时才会重新计算。对于派生值，请使用它们而不是 methods，以避免不必要的重复计算。
export default {
data() {
return { items: [], tax: 0.2 };
},
computed: {
itemCount() { return this.items.length; },
subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
total() { return this.subtotal * (1 + this.tax); } // uses another computed
}
}可写的 computed 属性
computed 可以同时设置 get 和 set，从而变为可写，这对于使用 v-model 的双向绑定很有用。
computed: {
fullName: {
get() { return `${this.firstName} ${this.lastName}`; },
set(value: string) {
[this.firstName, this.lastName] = value.split(' ');
}
}
}watch 选项
当响应式属性发生变化时，侦听器会执行副作用。对于由数据变化触发的异步操作，请使用它们，例如搜索词变化时获取数据。
watch: {
searchTerm(newVal: string) {
this.fetchResults(newVal);
},
// Deep watch for objects:
settings: {
handler(val) { this.saveSettings(val); },
deep: true
}
}Options API 中的生命周期钩子
将生命周期钩子声明为 methods：created、mounted、updated 和 unmounted。created 会在 DOM 准备就绪前运行。mounted 会在组件进入 DOM 后运行。
export default {
mounted() {
this.fetchData(); // runs after component is in the DOM
this.timer = setInterval(this.tick, 1000);
},
unmounted() {
clearInterval(this.timer); // cleanup
}
}模板访问：$refs
为模板元素添加 ref 属性，然后在 methods 中通过 this.$refs.name 访问 DOM 元素或子组件。该引用会在挂载后可用。
<input ref="emailInput" type="email">
// In mounted():
this.$refs.emailInput.focus();Mixins 与 Composition API
Options API 提供 mixins，用于在组件之间共享逻辑。Composition API 中的可组合函数基本取代了 mixins——mixins 更难理解，也容易发生命名空间冲突。编写新代码时，请优先使用 Composition API。
Options API 与 Composition API
Options API 非常适合中小型组件，初学者也更容易学习。Composition API（setup() /