data闭包 vue_vue学习之组件的data必须是一个函数

原文链接：https://blog.csdn.net/weixin_43841308/article/details/104346074

组件中的data必须是一个函数

组件化的本质是：为了组件能够更好的被复用

例如：多个计数器使用

HTML结构：

{{count}}

Vue实例

Vue.component('counter', {

template: '#tmpl',

data: function () {

// return dataObj

return { count: 0 }

},

methods: {

increment() {

this.count++

}

}

})

如果data是一个对象Object

结果：会干扰到其他组件的使用。

原因： Object是引用数据类型，如果不是function返回，每个数组的data都是内存的同一个地址，一个组件中的数据改变了，其他组件中的数据也会发生改变

额外补充：data是构造器的原型链上被创建的，同一组件的实例指向相同的data对象，共享data。那么，俩个实例应该由自己的区域，返回的数据就是各自的。引用他人文章案例如下：

如果data是一个函数形式

结果：每个实例的数据互不干扰

原因：data返回的数据会形成闭包，类似于创建私有数据空间，实例的data属性就都是独立的，不会相互影响。

补充：如果data是一个基本数据类型，就可以不用以函数的形式返回，因为基本数据类型都有一个属于自己的栈存储地址，存储的就是自己的值，不像object，存储的是一个地址。