data必须用函数，因对象是引用类型，多实例会共享同一内存导致状态污染；函数每次执行返回新对象，确保数据隔离。
Vue Options API 中，data 选项必须返回一个函数，而不是直接写成对象。一旦写成对象形式（如 data: { count: 0 }），就会触发状态共享——多个组件实例共用同一份数据内存，导致相互干扰。
为什么 data 写成对象会出问题
JavaScript 中对象是引用类型。当 data 是一个普通对象时，所有组件实例都指向这个对象的同一块内存地址。比如在 v-for 渲染多个相同组件、或页面中多次使用同一组件时：
- 点击第一个组件的按钮，修改了
count，第二个组件的count也跟着变； - 表单输入框内容被后一个实例覆盖，前一个实例值“消失”；
- 展开/折叠状态在不同卡片间同步切换，完全失去独立性。
典型错误写法与后果
以下写法在 Vue 2 中虽能运行，但存在严重隐患；Vue 3 已彻底禁止这种写法：
export default {
// ❌ 错误：data 是对象字面量
data: {
isActive: false,
items: []
}
}
后果：所有该组件实例共享 isActive 和 items，任意一处修改都会波及全部。
正确写法：data 必须是函数
每次创建组件实例时，函数执行一次，返回全新对象，确保数据隔离：
export default {
// ✅ 正确：data 是函数，返回新对象
data() {
return {
isActive: false,
items: [] // 每个实例都有自己的空数组
}
}
}
注意点：
- 不能用箭头函数（
data: () => ({})），否则this指向错误，无法访问props或其他选项； - 若需基于 props 初始化数据，可在函数内读取
this.xxx（Options API 下 this 已绑定）； - 返回的对象应为纯 JSON 结构，避免传入 Date、RegExp、Promise 等非响应式或有副作用的对象。
特殊情况：需要跨组件共享数据怎么办
如果确实需要多个组件“共用”某些状态（如用户登录态、主题色），不应靠破坏 data 隔离来实现，而应使用明确的共享机制：
- provide / inject：适合祖先→后代的有限层级共享；
- Vue.observable（Vue 2.6+）或 reactive（Vue 3）：创建可响应的共享状态对象；
- Pinia / Vuex：适合中大型应用的全局状态管理；
-
简单场景也可用外部 const 对象 + watch，但需手动保证响应性或配合
Vue.set。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
