Why Vue Component data Must Be a Function, Not an Object

Instance and Component data definitions

In a Vue root instance, the data option can be an object or a function. Example code shows both forms:

const app = new Vue({
  el: "#app",
  // object format
  data: {
    type: "object format"
  }
});

const app = new Vue({
  el: "#app",
  // function format
  data() {
    return {
      type: "function format"
    };
  }
});

For a component, the data option must be a function; defining it as an object triggers a warning:

Vue.component('comp', {
  template: `<div>组件</div>`,
  data: {
    name: "我是一个组件"
  }
});

Difference between function and object for component data

When data is an object, all component instances share the same memory address. Modifying one instance changes the other:

function Component() {}
Component.prototype.data = {
  name: '我是组件'
};
const componentA = new Component();
const componentB = new Component();
componentA.data.name = '我是组件A';
console.log(componentB.data.name); // 我是组件A

Using a function returns a fresh object for each instance, preventing data pollution:

function Component() {
  this.data = this.data();
}
Component.prototype.data = function () {
  return {
    name: '我是组件'
  };
};
const componentA = new Component();
const componentB = new Component();
console.log(componentB.data.name); // 我是组件
componentA.data.name = '我是组件A';
console.log(componentB.data.name); // 我是组件
console.log(componentA.data.name); // 我是组件A

Underlying mechanism

When a component is created, Vue merges options via mergeOptions. During this merge, the data option is validated; if it is not a function, Vue issues a warning because component data must be a factory function to avoid shared state.

Conclusion

The root instance can use an object or a function because it is a singleton and does not suffer from data sharing issues. Component instances, however, must define data as a function so that each instance receives its own independent data object, preventing unintended cross‑instance mutations.