Vue 组件 data为何是函数

在建立或注册模板的时候,传入一个data属性做为用来绑定的数据。可是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它。vue

Vue.component('my-component', {
template: '函数

OK
',
data() {
return {} // 返回一个惟一的对象,不要和其余组件共用一个对象进行返回
},
})
你在前面看到,在new Vue()的时候,是能够给data直接赋值为一个对象的。这是怎么回事,为何到了组件这里就不行了。

你要理解,上面这个操做是一个简易操做,实际上,它首先须要建立一个组件构造器,而后注册组件。注册组件的本质其实就是创建一个组件构造器的引用。使用组件才是真正建立一个组件实例。因此,注册组件其实并不产生新的组件类,但会产生一个能够用来实例化的新方式。this

理解这点以后,再理解js的原型链:prototype

var MyComponent = function() {}
MyComponent.prototype.data = {
a: 1,
b: 2,
}
// 上面是一个虚拟的组件构造器,真实的组件构造器方法不少设计

var component1 = new MyComponent()
var component2 = new MyComponent()
// 上面实例化出来两个组件实例,也就是经过 调用,建立的两个实例 component

component1.data.a === component2.data.a // true
component1.data.b = 5
component2.data.b // 5
能够看到上面代码中最后三句,这就比较坑爹了,若是两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另一个实例也会跟着改。这怎么能够,两个实例应该有本身各自的域才对。因此,须要经过下面方法来进行处理:对象

var MyComponent = function() {
this.data = this.data()
}
MyComponent.prototype.data = function() {
return {
a: 1,
b: 2,
}
}
这样每个实例的data属性都是独立的,不会相互影响了。因此,你如今知道为何vue组件的data必须是函数了吧。这都是由于js自己的特性带来的,跟vue自己设计无关。其实vue不该该把这个方法名取为data(),应该叫setData或其余更容易当即的方法名。原型链

相关文章
相关标签/搜索