组件中的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. HOMER docker版本安装详细流程

    概述 HOMER是一款100%开源的针对SIP/VOIP/RTC的抓包工具和监控工具. HOMER是一款强大的.运营商级.可扩展的数据包和事件捕获系统,是基于HEP/EEP协议的VoIP/RTC监控应 ...

  2. react 高效高质量搭建后台系统 系列 —— 表格的封装

    其他章节请看: react 高效高质量搭建后台系统 系列 表格 有一种页面在后台系统中比较常见:页面分上下两部分,上部分是 input.select.时间等查询项,下部分是查询项对应的表格数据.包含增 ...

  3. MySQL 中的事务理解

    MySQL 中的事务 前言 原子性 一致性 持久性 并发事务存在的问题 脏读 幻读 不可重复读 隔离性 事务的隔离级别 事务隔离是如何实现 可重复读 和 读提交 串行化 读未提交 可重复读解决了幻读吗 ...

  4. 【开发宝典】Java并发系列教程(四)

    作者:京东零售 刘跃明 Monitor概念 Java对象的内存布局 对象除了我们自定义的一些属性外,还有其它数据,在内存中可以分为三个区域:对象头.实例数据.对齐填充,这三个区域组成起来才是一个完整的 ...

  5. Session和Shiro的Session区别

    tomcat中的session常出现为jsessionId,而shiro的session不相同,两者的id不同. 在controller中,通过 request.getSession(_) 获取会话 ...

  6. j-link "the connected j-link is defective"问题的解决

    出现这个原因是 J-link和J-link的驱动不匹配,比如J-link的固件太老,J-link驱动太新.因此要解决的话,要不就是换不同版本的J-link驱动,要不就是换J-Link或升级J-link ...

  7. python requests 最牛攻略

    目录 安装 Reuqests HTTP 简介 什么是 HTTP HTTP工作原理 HTTP的9种请求方法 HTTP状态码 requests 快速上手 requests 发起请求的步骤 requests ...

  8. Ansible 多机自动化工具 初学笔记

    此文档仅张聪明同学个人笔记:新负责KTH-RPL Cluster GPU的漫漫学习长路 English Docs: https://docs.ansible.com/ansible/latest/in ...

  9. 钓鱼攻击之:CHM电子书钓鱼

    钓鱼攻击之:CHM电子书钓鱼 目录 钓鱼攻击之:CHM电子书钓鱼 1 CHM简介 2 .Chm文件因何变得危险 3 CHM 后门的优点 4 利用过程 4.1 准备工具 4.2 制作恶意chm文件 4. ...

  10. unity 单元测试

    unity 单元测试 Created: February 23, 2023 11:11 PM Tags: C语言, stm32, 单元测试 概述 为了方便在stm32上进行单元测试,需要在项目中导入u ...