Vue 中 data、watch、created 和 methods

以下是 Vue 中 data、watch、created 和 methods 的详细解释，结合常见使用场景和示例：

1. `data`：响应式数据容器

作用：定义组件的响应式数据（状态），当数据变化时，视图自动更新。
特点：
- 必须是一个函数，返回数据对象（避免多个组件实例共享同一对象）。
- 数据会被 Vue 的响应式系统劫持，自动追踪变化。

示例：

data() {return {message: "Hello Vue!",count: 0};
}

在模板或方法中通过 this.message 访问。

2. `watch`：监听数据变化

作用：观察 data 或计算属性的变化，执行副作用操作（如异步请求、复杂逻辑）。
特点：
- 支持深度监听对象/数组内部变化（deep: true）。
- 可设置 immediate: true 在初始化时立即触发回调。

示例：

watch: {count(newVal, oldVal) {console.log(`count 从 ${oldVal} 变为 ${newVal}`);},user: {handler(newVal) {// 监听对象内部变化},deep: true,immediate: true}
}

3. `created`：生命周期钩子

触发时机：组件实例创建完成，数据观测（data）已完成，但 DOM 未挂载。
典型用途：
- 初始化数据（如从 API 获取数据）。
- 添加事件监听（需在 beforeDestroy 中移除）。

示例：

created() {fetch("/api/data").then(response => response.json()).then(data => {this.message = data.message; // 更新响应式数据});
}

4. `methods`：方法集合

作用：定义组件内的事件处理函数或工具方法。
特点：
- 方法中的 this 自动绑定到组件实例。
- 可直接修改 data 中的数据（触发响应式更新）。

示例：

methods: {increment() {this.count++; // 修改 data 中的 count},showAlert() {alert(this.message);}
}

协作流程示例

export default {data() {return { count: 0 };},created() {// 初始化时设置 countthis.count = 10;},methods: {increment() {this.count++;}},watch: {count(newVal) {console.log("count 变化:", newVal);}}
};

created 钩子将 count 初始化为 10。
用户点击按钮触发 increment 方法，count 增加。
watch 监听到 count 变化，打印日志。

关键区别

特性	`data`	`watch`	`created`	`methods`
用途	存储响应式数据	监听数据变化	初始化操作	定义事件/逻辑方法
执行时机	组件初始化时生成	数据变化时触发	组件创建后，DOM 前	按需调用
响应式	是	是（需显式监听）	否	否

常见问题

为什么 data 必须是函数？
避免多个组件实例共享同一数据对象，导致状态污染。
watch vs computed
- computed：依赖其他数据计算新值（缓存机制）。
- watch：观察数据变化执行副作用（如异步操作）。
created vs mounted
- created：数据已初始化，DOM 未生成。
- mounted：DOM 已挂载，可操作 DOM 元素。

案例搭载
功能说明
用户可通过下拉框选择设备模式（Bridge_VLAN35/Bridge_UNTAG/Router1）
选中值双向绑定到 DeviceFromData.mode 字段
选项变化时触发 deviceModeChange 方法

<el-select v-model="DeviceFromData.mode" @change="deviceModeChange"id="wansMesh_basic_device_mode_select"placeholder="请选择设备模式"clearablefilterablestyle="width: 100%"
><el-option v-for="mode in deviceModes":key="mode.value":label="mode.label":value="mode.value":id="`mode-option-${mode.value}`":disabled="mode.disabled"/>
</el-select>

// Vue 数据部分
data() {return {DeviceFromData: {mode: '' // 初始值},deviceModes: [{ label: "Bridge_VLAN35", value: "bridge_vlan35",disabled: false },{ label: "Bridge_UNTAG", value: "bridge_untag",disabled: false },{ label: "Router1", value: "router",disabled: true // 示例禁用选项}]};
},
methods: {deviceModeChange(newVal) {console.log('模式已变更为:', newVal);// 可在此处添加业务逻辑}
}