一、实例和组件定义data的区别
vue文档在声明式渲染这一节中给了我们这样的一个demo:
<div id="app">{{ message }}</div>
var vm= new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在这个demo中data是一个对象,通过 new Vue 创建的 Vue 实例中,我们直接把data上的message属性通过模板渲染到页面上去了,这个data我们只在当前页面挂载的div#app这个点上使用。
但是在文档上Vue组件基础这一节中却告诉我们:一个组件的 data 选项必须是一个函数
如果为组件data直接定义为一个对象:
<script>
export default {
name: "Home",
components: {},
data:{
},
};
</script>
则会报错:
报错说明:“data”选项应该是在组件定义中返回每个实例值的函数。
二、组件data定义函数与对象的区别
Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了;
JavaScript只有函数构成作用域(注意理解作用域,只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。
这里我们模仿组件构造函数,定义data属性,采用对象的形式
function Component(){
}
Component.prototype.data = {
count : 0
}
const componentA = new Component()
const componentB = new Component()
console.log(componentB.data.count) // 0
componentA.data.count = 1
console.log(componentB.data.count) // 1
产生这样的原因这是两者共用了同一个内存地址,componentA修改的内容,同样对componentB产生了影响。
如果采用函数的形式,则不会出现这种情况(函数返回的对象内存地址并不相同)
const Component = function() {
this.data = this.data();
};
Component.prototype.data = function() {
return {
count : 0
}
};
console.log(componentB.data.count) // 0
componentA.data.count = 1
console.log(componentB.data.count) // 0
这样每一个实例的data属性都是独立的,不会相互影响了。
总结
- 如果是对象形式的话,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
- 如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。