Vue 2 怎么使用 data 选项定义响应式状态并通过 methods 编写业务做法

data 必须是返回对象的函数以确保组件实例间数据隔离，methods 定义可被事件或其它方法调用的函数，二者配合实现响应式更新；未在 data 中声明的属性需用 this.$set 才能响应。

在 Vue 2 中，data 选项用于声明组件的响应式状态，methods 选项则用来定义可被事件、生命周期或其它方法调用的业务逻辑函数。两者配合使用，构成 Vue 2 Options API 最基础也最核心的状态与行为组织方式。

data 必须是函数，返回一个对象

组件的 data 不能直接写成对象字面量（否则多个实例会共享同一份数据），必须是一个返回新对象的函数：

1. 正确写法：data() { return { count: 0, message: 'Hello', list: [] } }
2. 错误写法：data: { count: 0 }（仅适用于 Vue 实例，不适用于组件）
3. 所有在返回对象中声明的属性，都会被 Vue 通过 Object.defineProperty 转为响应式——读取触发 getter，赋值触发 setter，进而通知视图更新
4. 未在 data 中声明的属性（如后续加 this.newField = 'x'）不会响应，需用 this.$set 添加

methods 定义可复用、可响应调用的函数

methods 是一个对象，其每个属性都是一个函数，可被模板事件（如 @click）、其它方法或生命周期钩子调用：

1. 函数内 this 自动绑定到当前 Vue 实例，可直接访问 data 属性、其它 methods 或 computed
2. 示例：methods: { increment() { this.count++ }, reset() { this.count = 0 } }
3. 模板中调用：<button @click="increment">+1</button>；也可在其它方法里调用：this.reset()
4. 注意：不要在 methods 中使用箭头函数（会丢失 this 绑定）

data 和 methods 在模板中自然联动

只要 data 属性是响应式的，且 methods 正确修改了这些属性，视图就会自动同步更新：

1. 例如：data() { return { visible: true } }，配合 methods: { toggle() { this.visible = !this.visible } }
2. 模板：<div v-if="visible">显示内容</div><button @click="toggle">切换</button>
3. 点击按钮时，visible 值变化 → 触发响应式更新 → v-if 重新求值 → DOM 自动增删

常见注意事项

避免踩坑，提升稳定性：

1. data 中尽量提前声明所有可能用到的字段，哪怕初始值为空（''、null、[]、{}），减少后期动态添加需求
2. 数组索引赋值（this.list[0] = 'x'）或对象新增属性（this.obj.age = 25）不会触发更新，必须用 this.$set(this.list, 0, 'x') 或 this.$set(this.obj, 'age', 25)
3. methods 中的方法不会自动缓存，每次调用都执行；如需缓存逻辑，请改用 computed
4. 若需在组件外访问或修改 data 状态，可通过 this.$data 获取原始响应式对象（不推荐直接操作，应封装在 methods 中）