Vue 组件 data为啥是函数

Posted 2023-04-30

参考技术A 在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。
Vue.component('my-component',
template: '<div>OK</div>',
data()
return // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回
,
)

你在前面看到，在new Vue()的时候，是可以给data直接赋值为一个对象的。这是怎么回事，为什么到了组件这里就不行了。
你要理解，上面这个操作是一个简易操作，实际上，它首先需要创建一个组件构造器，然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以，注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式。
理解这点之后，再理解js的原型链：
var MyComponent = function()
MyComponent.prototype.data =
a: 1,
b: 2,

// 上面是一个虚拟的组件构造器，真实的组件构造器方法很多

var component1 = new MyComponent()
var component2 = new MyComponent()
// 上面实例化出来两个组件实例，也就是通过<my-component>调用，本回答被提问者采纳

vue组件中为什么data必须是一个函数

如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函数的形式，构造data时会将其作为工厂函数都会返回全新data对象