组件中的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. C# SMTP发邮件不支持465端口的解决方案

    C# 发邮件帮助类传送门(465端口除外): https://www.cnblogs.com/dennisdong/p/15953790.html 一.问题解惑,为什么465发送失败 查阅资料得知,. ...

  2. C# winform 一个窗体需要调用自定义用户控件的控件名称

    给用户控件ucQRCode增加属性: //二维码图片 private PictureBox _pictureBoxFSHLQrCode; public PictureBox PictureBoxFSH ...

  3. SpringMVC的常用注解、参数绑定、转发与重定向

    SpringMvc的常用注解 @RequestMapping() SpringMvc通过@RequestMapping注解将URL请求与业务的方法进行映射,在控制器的类定义处定义方法处都可以添加@Re ...

  4. [代码审计基础 04]ssrf漏洞的利用&伪协议

    ssrf漏洞的利用&伪协议 0x1 SSRF原理解析 什么是ssrf SSRF (Server-Side Request Forgery,服务端请求伪造)是指攻击者向服务端发送包含恶意URL链 ...

  5. 功放世界web新手区

    第一题:view_source: 顾名思义就是查看网页源代码,按一下f12就ok 第二题:robots协议 换言之就是,robots协议告诉了我们,什么可以爬,什么不可以爬,要是觉得坐牢没什么,那就可 ...

  6. 【KAWAKO】soundtoch-使用可执行文件对音频进行变调或变速

    目录 下载 单次使用 使用python脚本批量处理 下载 从官网下载可执行文件. 单次使用 在终端中直接运行,会出现使用方法和可选参数. 变速就设置tempo,变调就设置pitch,都变就都设置.变速 ...

  7. JZOJ 4270.【NOIP2015模拟10.27】魔道研究

    魔道研究 题面 思路 简单的想,就是在 \(T\) 个可重集合每个中选出 \(k\) 个最大的数组成新的可重集合,其中 \(k\) 为其编号 然后在新的集合中选前 \(n\) 大的数,求其和 考虑开 ...

  8. 病程极短(≤16周)的495例未分化关节炎患者随访2年的结局[EULAR2015_SAT0055]

    病程极短(≤16周)的495例未分化关节炎患者随访2年的结局   SAT0055 TWO-YEAR OUTCOME IN 495 PATIENTS WITH UNDIFFERENTIATED ARTH ...

  9. 从 B 站出发,用 Chrome devTools performance 分析页面如何渲染

    页面是如何渲染的?通常会得到"解析 HTML.css 合成 Render Tree,就可以渲染了"的回答.但是具体都做了些什么,却很少有人细说,我们今天就从 Chrome 的性能工 ...

  10. python将一行多字符转换为多行单字符方法

    笔者这次是第一次写东西,主要是想把在运用中的一些实例给记录下来,分享给那些和笔者有同样需求的人.可能分享的方法有些累赘或者不准确,还望各位大佬勿喷,因为笔者也是python小白,这些都是通过搜索汇总得 ...