官网的示例
var vm = new Vue({ el: '#example', data: { message: 'Hello' } });
项目中的写法
data() { return { message: 'Hello' } }
为什么要把data变成函数并return属性呢?
组件是一个可复用的实例,当你引用一个组件的时候,组件里的data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。
将data封装成函数后,在实例化组件的时候,我们只是调用了data函数生成的数据副本,避免了数据污染。
PS:下面看下vue中data是否使用return的区别
// Vue实例中data属性是如下方式展示的: let app = newVue({ el: "#app", data: { msg: '' }, methods: {} }) // 使用组件化的项目中是如下方式展示的: export default{ data(){ return{ showLogin:true, msg:'' } }, methods:{} }
// 为何在大型项目中data需要使用return返回数据呢?
// 答:不使用return包裹的数据会在项目的全局可见,会造成变量污染
// 使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件
总结
以上所述是小编给大家介绍的vue里的data要用return返回的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
vue,data,return
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“vue里的data要用return返回的原因浅析”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。