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

一、实例和组件定义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，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。