Vue 组件数据存放

学习笔记：Vue 组件数据存放

1. 组件可以访问Vue实例数据吗?

• 组件是一个单独功能模块的封装：

这个模块有属于自己的HTML模板，也应该有属性自己的数据data。

• 组件中的数据是保存在哪里呢？顶层的Vue实例中吗？

组件是不能直接访问Vue实例中的data数据
即使可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变的非常臃肿
Vue组件应该有自己保存数据的地方。

2.组件自己的数据存放在哪里呢?

组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据

• 为什么data在组件中必须是一个函数呢?

当然，如果不是一个函数，Vue直接就会报错(皮一下)。
组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方
而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的
基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据
而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。