组件中的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. 搭个ChatGPT算法模型,离Java程序员有多远?

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 最近 ChatGPT 很火,火到了各行各业.记得去年更多的还是码农最新体验后拿它搜代码,现在各 ...

  2. P16_发布-小程序的推广与运行数据的查看

    协同工作和发布 - 发布上线 基于小程序码进行推广 相对于普通二维码来说,小程序码的优势如下: 在样式上更具辨识度和视觉冲击力 能够更加清晰地树立小程序的品牌形象 可以帮助开发者更好地推广小程序 获取 ...

  3. IoT 边缘集群基于 Kubernetes Events 的告警通知实现(二):进一步配置

    上一篇文章 IoT 边缘集群基于 Kubernetes Events 的告警通知实现 目标 告警恢复通知 - 经过评估无法实现 原因: 告警和恢复是单独完全不相关的事件, 告警是 Warning 级别 ...

  4. [TJOI2007]书架

    题目 网上搜 分析 我们可以认为插入一本书是在树中第 \(k\) 的位置进行插入操作 其中 \(k\) 为这本放入书架后的位置 考虑 \(fhq-treap\) 实现 我们将书编号为 \([0,n-1 ...

  5. 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(8)-Charles如何进行断点调试

    1.简介 Charles和Fiddler一样也有个强大的功能,可以修改发送到服务器的数据包,但是修改前需要拦截,即设置断点.设置断点后,开始拦截接下来所有网页,直到取消断点.这个功能可以在数据包发送之 ...

  6. 国外的SRE都是干啥工作的?薪资如何?

    本文翻译自:https://www.flagship.io/glossary/site-reliability-engineer/,意译~ 众所周知,开发和 IT 运营之间因为屁股决定脑袋,存在巨大的 ...

  7. 使用python编写简单的api接口

    先安装flask模块 pip install Flask py文件 from flask import Flask, request, jsonify app = Flask(__name__) @a ...

  8. 快速删除 node_modules

    node_modules 文件夹很大,不推荐右键通过回收站删除,通过 rimraf 来删除速度很快: # 安装 rimraf npm i -g rimraf # 删除 node_modules rim ...

  9. 禁用a标签点击事件

    a标签是没有disable属性的 ,如果想用disable 禁用a标签的点击事件,也可以实现: 1.a标签要用disable属性,必须和pointer-events属性一起使用, html代码: &l ...

  10. Ubuntu 安装 Nginx

    Ubuntu版本:20.04.1 LTS Nginx版本:1.22.0 下载地址: https://nginx.org/en/download.html 上传目录:/usr/local/src 安装目 ...