data选项必须是函数以返回新对象，避免多实例共享数据导致状态污染；其返回对象的顶层属性自动响应式并代理到this，命名不能以_或$开头，建议预先声明所有字段。

Vue Options API 中，data 选项必须是一个函数，返回一个普通 JavaScript 对象，这个对象的顶层属性会自动变成响应式，并被代理到组件实例上（即 this），供模板和方法直接访问。

data 必须写成函数形式

这是为了避免多个组件实例共享同一份数据对象。如果写成对象字面量，所有实例会共用同一个引用，导致状态污染。

• ✅ 正确写法：使用函数返回新对象
• ❌ 错误写法：data: { count: 0 }（会被 Vue 警告，且多实例间状态互相影响）

返回对象的属性就是响应式字段

data 函数返回的对象中，每个顶层属性都会被 Vue 的响应式系统包装（Vue 3 使用 Proxy）。修改这些属性会触发视图更新。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• this.message 等价于 this.$data.message
• 属性名不能以 _ 或 $ 开头，否则不会被代理（需通过 this.$data._private 访问）
• 建议提前声明所有可能用到的字段，即使初始值为 null 或 undefined，避免响应式“丢失”

常见写法与注意事项

函数可以是普通函数或箭头函数，但要注意 this 指向：

• 普通函数：data() { return { name: 'Vue', version: 3 } } —— this 指向组件实例，可访问 props 等
• 箭头函数：data: (vm) => ({ msg: vm.title || 'default' }) —— this 不可用，但第一个参数 vm 是组件实例
• 不推荐返回带原型的对象（如 new Date()、document.createElement()），应返回纯数据对象

配合生命周期使用示例

data 初始化后，在 created 钩子中就能访问：

• created() { console.log(this.count) // 可读取 data 返回的属性 }
• 模板中直接插值：{{ count }} 或事件中修改：@click="count++"

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！