为什么在vue的组件中,data要用function返回对象呢?
2017-09-25 13:34
309 查看
对于这个问题很多小伙伴都问过。其实官方也有自己的说法,下面这个是官方的解答:
当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象。
其实也很好理解,大概意思就是:
类比与引用数据类型。如果不用function
return 每个组件的data都是内存的同一个地址,那一个数据改变其他也改变了,这当然就不是我们想要的。用function return 其实就相当于申明了新的变量,相互独立,自然就不会有这样的问题;js在赋值object对象时,是直接一个相同的内存地址。所以为了每个组件的data独立,采用了这种方式。
如果不是组件的话,正常data的写法可以直接写一个对象,比如
data:{ msg : ' 下载 ' },但由于组件是会在多个地方引用
的,JS中直接共享对象会造成引用传递,也就是说修改了msg后所有按钮的msg都会跟着修改,所以这里用function来每次返回一个
对象实例。
相关文章推荐
- Vue组件中data选项为什么必须是函数
- vue中data里为什么要写return返回
- Vue 组件 data为什么是函数?
- vue中遇到的一些问题,data到底是function还是对象以及自动对焦
- 有关$.post(url,{param:"param"},function(data){})中的返回对象data
- Vue实例里面的data属性为什么用函数返回
- vue中组件中的data是一个方法而不是一个对象
- 解析:vue.js中组件的data数据为什么是函数?
- Vue源码小问答一:为什么option.data的类型必须是function
- Vue组件中的data必须是一个function的原因浅析
- Vue 组件 data为什么是函数?
- 奇妙的动态代理:EF中返回的对象为什么序列化失败
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- HttpUrlConnection访问百度,不知道为什么返回的url数据有错,loaddata不出来,之前用模拟器还没错,用真机就出不来百度了
- [译]OOSE第4章:面向对象系统的研发 4.2 功能/数据方法Function/data methods
- dhl:页面中调用 通过类返回SqlDataReader类型的对象
- vuejsLearn--- -- 怎么查看、修改、追加数据---->data对象
- jface databinding:可多选的widget List组件selection项目与java.util.List对象的双向数据绑定
- VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
- vue实例中为什么data使用return 包裹