Options API 怎么在经典选项式对象中清晰划分 data、methods 与 computed-Vue.js-PHP中文网

options api 的核心是按职责分离逻辑：data 仅存响应式基础数据，methods 封装需显式调用的操作，computed 专注缓存式派生值；三者边界清晰，不可混用。

options api 怎么在经典选项式对象中清晰划分 data、methods 与 computed

Options API 的核心就是把逻辑按职责分块，写在固定的选项里。data 管状态、methods 管行为、computed 管派生值——三者边界明确，不混用，结构自然就清晰。

data：只放响应式原始数据

它必须是一个函数，返回一个对象，里面只包含组件需要直接读写的基础值，比如字符串、数字、布尔、数组、嵌套对象。不放函数、不放计算结果、不放从 props 或其他地方派生的值。

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

✅ 正确示例：count: 0, name: '', isActive: true, userList: []
❌ 避免：fullName: this.firstName + ' ' + this.lastName（这是计算逻辑，应进 computed）
❌ 避免：handleSubmit: () => { ... }（方法属于 methods）

methods：只封装可复用、有副作用或需显式调用的操作

所有用户交互触发的逻辑（如点击、提交）、内部流程控制（如校验、重置）、或需要多次调用的业务动作，都放这里。它不自动响应数据变化，只等被调用。

✅ 正确示例：increment() { this.count++ }, submitForm() { api.post(this.formData) }
❌ 避免：getFullName() { return this.firstName + ' ' + this.lastName }（这该是 computed，否则每次模板调用都执行，无缓存）
✅ 补充说明：methods 中的 this 指向组件实例，可安全访问 data、computed 和其他 methods

computed：专注声明式、依赖响应式数据的派生值

只要结果完全由 data 或其他 computed 属性决定，且需要响应式更新，就该进 computed。它自动缓存，只有依赖变更时才重新求值。

✅ 正确示例：fullName() { return this.firstName + ' ' + this.lastName }, isEligible() { return this.age >= 18 && this.status === 'active' }
✅ 可写计算属性（带 set）：fullName: { get() { ... }, set(val) { [this.firstName, this.lastName] = val.split(' ') } }
❌ 避免：fetchData() { return axios.get(...) }（这是异步操作，应放在 methods 或 setup 中配合 async/await）