Vue 中 data 为什么是函数而不是对象？

这是 Vue 面试中的经典问题，核心原因是保证每个组件实例有独立的 data 引用。

一、问题演示

如果 data 是对象，会发生什么？

// 错误示例：data 是对象constComponent={data:{count:0},methods:{increment(){this.count++;}}}// 创建两个组件实例constinstance1=newVue(Component);constinstance2=newVue(Component);instance1.count++;// 1instance2.count++;// 2 ← 出问题了！

两个实例的 count 变成了 2，因为它们共享同一个 data 对象！

二、为什么是函数？

// 正确写法：data 是函数constComponent={data(){return{count:0}}}// 创建两个组件实例constinstance1=newVue(Component);constinstance2=newVue(Component);instance1.count++;// 1instance2.count++;// 1 ✓ 各自独立

每次调用data()都会返回一个新的对象，每个实例都有独立的 data 副本。

三、原理

// Vue 内部大致是这样做的functioncreateComponentInstance(options){constdata=typeofoptions.data==='function'?options.data()// 函数：调用获取新对象:options.data;// 对象：直接引用（不推荐）return{data,methods:options.methods};}

四、为什么根实例可以用对象？

// main.jsnewVue({data:{// 可以用对象count:0}});

因为根实例只创建一次，不存在共享问题。Vue 内部会调用vm.$data = typeof data === 'function' ? data.call(vm) : data处理。

五、回答话术

"data 必须是一个函数，是因为 Vue 组件可能被实例化多次。

如果 data 是对象，所有实例会共享同一个引用，一个实例修改会影响其他实例。

用函数后，每次调用返回新对象，保证每个实例的 data 独立。

根实例可以用对象，因为它只创建一次，不存在这个问题。"