当前位置: 首页 > news >正文

Vue组件里的data为什么是函数,而不是对象


1.大家看到Vue组件中的函数

data()

{

return { }

}

是否有过思考,为什么data是函数,而不是对象呢

相信很多学过闭包的同学就灵机一动,脑门一拍,这个data怎么像一个闭包啊

对,你想的没错,这就是一个典型的闭包

因为闭包可以简单理解为:方法里面返回一个方法

如果不清楚的同学可以看我写的上篇博文:闭包得从底层理解

2.闭包最重要的特性:实现对数据的私有和封装

data写成函数(闭包)的形式,相当于给每一个组件创建了一个私有数据空间

也就是说:A组件数据data只可以为A服务,B组件数据data只可以为B服务

A组件数据data不会影响B组件数据data,B组件不会影响A组件

私有的数据空间,各组件数据不会受影响


3.如果用对象,所有组件的就不能实现私有,只能共用

就像共用一间卫生间,而不是独立卫生间

共用的卫生间只要有人用过,你就会发现变化啦

就会牵一发动全身,造成数据发生改变

相关文章:

  • webpack的理解和使用
  • Building a RESTful Web Service(转)
  • Uncaught SyntaxError: Unexpected token ‘<‘完美解决
  • oVirt (Open Virtual) 之 VDSM 学习笔记 (二) 流程追踪
  • 完美解决[webpack-cli] Unable to load ‘@webpack-cli/serve‘ command
  • HTTP相关概念
  • 原型与原型链的底层理解
  • 浅谈promise
  • 变更管理、信息系统安全管理及项目风险管理作业
  • promise 的基本概念
  • Android 学习之drawerlayout写侧滑菜单
  • 使用Promise按顺序读取文件内容
  • Promise 封装读文件的方法
  • Linux链接脚本学习--lds
  • 项目文件引用的清晰讲解
  • __proto__ 和 prototype的关系
  • 《剑指offer》分解让复杂问题更简单
  • DataBase in Android
  • dva中组件的懒加载
  • JavaScript标准库系列——Math对象和Date对象(二)
  • Laravel Telescope:优雅的应用调试工具
  • Leetcode 27 Remove Element
  • React-生命周期杂记
  • web标准化(下)
  • 当SetTimeout遇到了字符串
  • 好的网址,关于.net 4.0 ,vs 2010
  • 聊聊redis的数据结构的应用
  • 强力优化Rancher k8s中国区的使用体验
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 微信小程序开发问题汇总
  • 携程小程序初体验
  •  一套莫尔斯电报听写、翻译系统
  • puppet连载22:define用法
  • ​Java并发新构件之Exchanger
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (26)4.7 字符函数和字符串函数
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • (BFS)hdoj2377-Bus Pass
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (Redis使用系列) SpirngBoot中关于Redis的值的各种方式的存储与取出 三
  • (九)c52学习之旅-定时器
  • *Algs4-1.5.25随机网格的倍率测试-(未读懂题)
  • .NET 5.0正式发布,有什么功能特性(翻译)
  • .NET BackgroundWorker
  • .NET NPOI导出Excel详解
  • .NET版Word处理控件Aspose.words功能演示:在ASP.NET MVC中创建MS Word编辑器
  • .net获取当前url各种属性(文件名、参数、域名 等)的方法
  • .net与java建立WebService再互相调用
  • .Net中ListT 泛型转成DataTable、DataSet
  • ::前边啥也没有
  • @拔赤:Web前端开发十日谈
  • [ C++ ] STL_list 使用及其模拟实现
  • [acwing周赛复盘] 第 94 场周赛20230311
  • [Angular 基础] - 表单:响应式表单