组件中的data为什么不是一个对象而是一个函数?

组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响。

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

 
 

组件中的data为什么不是一个对象而是一个函数?的更多相关文章

  1. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  3. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  4. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  5. 黑马vue---59-60、组件中的data和methods

    黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...

  6. 第六章 组件 56 组件-组件中的data

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. vue-为什么子组件中的data选项必须是函数?

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue 组件中的data数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  10. 为什么vue组件中的data不是一个对象而是一个函数

    如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰. 这是因为JavaScript的特性所导致,在component ...

随机推荐

  1. 用ksweb+Android做服务器,搭建WordPress博客环境

    旧的安卓手机不要仍,安装上ksweb给wordpress做服务器,隔壁小孩都馋哭了. 为了能在自己的安卓手机服务器上写博客,首先我们来了解一下WordPress和ksweb: WordPress是使用 ...

  2. 生成式AI对业务流程有哪些影响?企业如何应用生成式AI?一文看懂

    集成与融合类ChatGPT工具与技术,以生成式AI变革业务流程 ChatGPT背后的生成式AI,聊聊生成式AI如何改变业务流程 ChatGPT月活用户过亿,生成式AI对组织的业务流程有哪些影响? 生成 ...

  3. 云原生时代顶流消息中间件Apache Pulsar部署实操-上

    @ 目录 安装 运行时Java版本推荐 Locally Standalone集群 启动 验证 部署分布式集群 部署说明 初始化集群元数据 部署BookKeeper 部署Broker Admin客户端和 ...

  4. P5_认识小程序项目的基本组成结构

    项目结构 了解项目的基本组成结构 pages 用来存放所有小程序的页面 utils 用来存放工具性质的模块(例如:格式化时间的自定义模块) app.js 小程序项目的入口文件 app.json 小程序 ...

  5. BAL数据集详解

    详细格式:https://grail.cs.washington.edu/projects/bal/ Bundle Adjustment in the Large Recent work in Str ...

  6. Vue框架:7、Node环境搭建,Vue-cli,es6导出、导入语法,跨域问题解决方法,小练习

    前端开发之Vue框架 一.Node环境搭建 什么是Node或NodeJS: node js是一门后端语言 JavaScript只能运行在浏览器中,因为浏览器中有他的解释器环境 基于谷歌浏览器的v8引擎 ...

  7. 使用NAT网络模式搭建内网,修改IP地址

    使用NAT网络模式搭建内网,修改IP地址 首先说明一下虚拟机的三种联网方式: 桥接模式: 简单来说就是使这台虚拟机成为一台在互联网中的有独立IP的一台新设备和Mac地址(不够都是虚拟的) NAT模式: ...

  8. A*算法小记

    \(\text{A*}\) 一种启发式搜索 和暴搜的差别是多了一个估价函数,每次取出一个估算最优的状态以期更高效完成任务 重点在于估价函数 \(\text{h*(n)}\) 的设计,若实际代价为 \( ...

  9. JZOJ 3571. 【GDKOI2014】内存分配

    解析 也就是说建一棵权值线段树维护这些信息.要注意的是每次的最优解必然是 \(b\) 小的先做,故离线排序确定离散后的下标再依次求解 \(Code\) #include<cstdio> # ...

  10. win11 文件夹内关闭显示更多

    使用命令提示符 打开cmd窗口,输入  reg add HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\Inpro ...