data 必须是返回对象的函数以确保组件实例间数据隔离，methods 定义可被事件或其它方法调用的函数，二者配合实现响应式更新；未在 data 中声明的属性需用 this.$set 才能响应。
在 Vue 2 中，data 选项用于声明组件的响应式状态，methods 选项则用来定义可被事件、生命周期或其它方法调用的业务逻辑函数。两者配合使用，构成 Vue 2 Options API 最基础也最核心的状态与行为组织方式。
data 必须是函数，返回一个对象
组件的 data 不能直接写成对象字面量（否则多个实例会共享同一份数据），必须是一个返回新对象的函数：
- 正确写法：
data() { return { count: 0, message: 'Hello', list: [] } } - 错误写法：
data: { count: 0 }（仅适用于 Vue 实例，不适用于组件） - 所有在返回对象中声明的属性，都会被 Vue 通过
Object.defineProperty转为响应式——读取触发 getter，赋值触发 setter，进而通知视图更新 - 未在
data中声明的属性（如后续加this.newField = 'x'）不会响应，需用this.$set添加
methods 定义可复用、可响应调用的函数
methods 是一个对象，其每个属性都是一个函数，可被模板事件（如 @click）、其它方法或生命周期钩子调用：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 函数内
this自动绑定到当前 Vue 实例，可直接访问data属性、其它methods或computed - 示例：
methods: { increment() { this.count++ }, reset() { this.count = 0 } } - 模板中调用：
<button @click="increment">+1</button>；也可在其它方法里调用：this.reset() - 注意：不要在
methods中使用箭头函数（会丢失this绑定）
data 和 methods 在模板中自然联动
只要 data 属性是响应式的，且 methods 正确修改了这些属性，视图就会自动同步更新：
立即学习“前端免费学习笔记（深入）”；
- 例如：
data() { return { visible: true } }，配合methods: { toggle() { this.visible = !this.visible } } - 模板：
<div v-if="visible">显示内容</div><button @click="toggle">切换</button> - 点击按钮时，
visible值变化 → 触发响应式更新 →v-if重新求值 → DOM 自动增删
常见注意事项
避免踩坑，提升稳定性：
-
data中尽量提前声明所有可能用到的字段，哪怕初始值为空（''、null、[]、{}），减少后期动态添加需求 - 数组索引赋值（
this.list[0] = 'x'）或对象新增属性（this.obj.age = 25）不会触发更新，必须用this.$set(this.list, 0, 'x')或this.$set(this.obj, 'age', 25) -
methods中的方法不会自动缓存，每次调用都执行；如需缓存逻辑，请改用computed - 若需在组件外访问或修改 data 状态，可通过
this.$data获取原始响应式对象（不推荐直接操作，应封装在 methods 中）
