data 组件状态数据

最后更新：2026-10-22

data 选项声明组件的响应式状态：必须写成返回对象的函数，保证每个实例拥有独立数据。

📝 语法

export default {
  data() {
    return { count: 0, user: { name: "Ana" } }
  }
}

value	无参数：是一个返回初始数据的函数（或对象，仅限根实例）

返回值：对象内部的字段自动成为响应式数据，模板里直接用名字访问

修改下面的代码，在预览区实时查看效果：

输出：

显示「计数：0」，点击递增。

⚠️ 注意 必须用函数：对象写法会让多个实例共享同一份数据，造成串数据 bug。

ℹ️ 说明 返回对象里的所有字段都会做深层响应式处理（嵌套对象/数组同样响应）。

💡 提示 以 _ 或 $ 开头的字段不会挂到实例上（保留给内部使用）。

更多案例即将上线。

Q 为什么 data 必须是函数？

A 组件会被复用多次，函数保证每次调用返回全新对象，实例之间数据隔离。

Q data 里能写 props 吗？

A 不能直接依赖：要用 props 派生请写 computed（prop 变化时 data 不会自动更新）。

Q 模板里需要 this 吗？

A 不需要：模板里直接写字段名，脚本逻辑里才用 this.count。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。