Vue中组件数据的存放

在Vue.js中，组件是一个单独功能模板的封装，这个模板有属于自己的HTML代码，也有属于自己的数据data。
测试下面这段代码，可以发现，组件不能直接访问Vue实例的data。

<div id="app">
	<cpn></cpn>
</div>

<template>
	<div>{{message}}</div>
</template>

<script>
	let app = new Vue({
		el:'#app',
		data:{
			message:"Hello World"
		},
		components:{
			'cpn':{
				template:'#cpn'
			}
	})
</script>

即使可以访问，如果数据放在Vue实例中，Vue实例就会变得很臃肿。
因此，Vue实例应该自己存放数据的地方。

组件对象也有一个data属性，只是这个data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据。

为什么是一个函数呢？先来看下面这段代码

function test(){
	return {
		name:"peggy"
	}
}
let a = test()
let b = test()
let c = test()

我们知道，a，b，c三个对象虽然都是调用同一个方法，但是三者的地址是不一样的，修改a对象name属性，b，c的结果并不会发生改变；可是如果在function前加上"let test ="即：

let test =function test(){
	return {
		name:"peggy"
	}
}
let a = test()
let b = test()
let c = test()

那么abc的地址是一致的，因此就能解释为什么data在组件中必须是一个函数。Vue让每个组件对象返回一个新对象，如果是同一个对象，组件在多次使用的时候会相互影响，达不到期望的效果。