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

014-code2026-03-12 10:39

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

一、问题演示

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

javascript 复制代码

// 错误示例：data 是对象
const Component = {
    data: {
        count: 0
    },
    methods: {
        increment() {
            this.count++;
        }
    }
}

// 创建两个组件实例
const instance1 = new Vue(Component);
const instance2 = new Vue(Component);

instance1.count++;  // 1
instance2.count++;  // 2  ← 出问题了！

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

二、为什么是函数？

javascript 复制代码

// 正确写法：data 是函数
const Component = {
    data() {
        return {
            count: 0
        }
    }
}

// 创建两个组件实例
const instance1 = new Vue(Component);
const instance2 = new Vue(Component);

instance1.count++;  // 1
instance2.count++;  // 1 ✓ 各自独立

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

三、原理

javascript 复制代码

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

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

javascript 复制代码

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

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

五、回答话术

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

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

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

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