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,就会造成一个变了全都会变的结果。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容