Vue组件中的data为什么必须是一个函数 | 您所在的位置:网站首页 › vue中data为什么是一个函数 › Vue组件中的data为什么必须是一个函数 |
在vue组件中data的属性值是函数,如下所示export default {
data() {
// data是一个函数,data: function() {}的简写
return {
// 页面要初始化的数据
name: 'itclanCoder',
};
},
}; 而非:如下所示 export default { data: { // data是一个对象 name: 'itclanCoder', }, };当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例 也就是说,在很多页面中,定义的组件可以复用在多个页面 如果data是一个纯碎的对象,则所有的实例将共享引用同一份data数据对象,无论在哪个组件实例中修改data,都会影响到所有的组件实例 如果data是函数,每次创建一个新实例后,调用data函数,从而返回初始数据的一个全新副本数据对象 这样每复用一次组件,会返回一份新的data数据,类似于给每个组件实例创建一个私有的数据空间,让各个组件的实例各自独立,互不影响,保持低耦合 可以看下面一段代码 // 声明构造器函数 function Person() {} Person.prototype.data = { // 原型下挂载一对象,并有name属性 name: 'itclanCoder', }; var p1 = new Person(); var p2 = new Person(); p1.data.name = '川川'; console.log(p1.data.name); // 川川 console.log(p2.data.name); // 川川挂载在原型下属性如果是一个对象,实例化出来的对象(p1,p2)都指向的是同一份实体 原型下的属性相当于是公有的 JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。 而在Vue中,更多的是想要复用组件,那就需要每个组件都有自己的数据,这样组件之间才不会相互干扰。 所以组件的数据不能写成对象的形式,而是要写成函数的形式。数据以函数返回值的形式定义,这样当每次复用组件的时候,就会返回一个新的data,也就是说每个组件都有自己的私有数据空间,它们各自维护自己的数据,不会干扰其他组件的正常运行。 |
CopyRight 2018-2019 实验室设备网 版权所有 |