组件中的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. imax6开发版_交叉编译

    下载 arm-linux-gnueabihf-gcc编译器 sudo apt install gcc-arm-linux-gnueabihf #安装完成后使用如下命令查看版本 arm-linux-gn ...

  2. day12-SpringMVC文件上传

    SpringMVC文件上传 1.基本介绍 SpringMVC 为文件上传提供了直接的支持,这种支持是通过即插即用的 MultipartResolver 实现的.spring 用 Jacarta Com ...

  3. The Missing Semester - 第三讲 学习笔记

    第三讲 Vim 课程视频地址:https://www.bilibili.com/video/BV1Dy4y1a7BW 课程讲义地址:https://missing-semester-cn.github ...

  4. ES6的新特性有哪些

    1.let.const 2.模板字符串 3.箭头函数 4.解构赋值 5.promise 6.数组的新方法 7.对象的新方法 8.class类 9.新增Set.Map两种数据结构 10.proxy

  5. 【RocketMQ】Dledger日志复制源码分析

    消息存储 在 [RocketMQ]消息的存储一文中提到,Broker收到消息后会调用CommitLog的asyncPutMessage方法写入消息,在DLedger模式下使用的是DLedgerComm ...

  6. vue-fullpage全屏插件使用

    直入主题:vue项目中想做一个全屏翻滚的效果,vue-fullpage 就很不错 下面介绍vue-fullpage 的使用方法,这里封装成了vue的一个指令的形式来进行使用 1.安装vue-fullp ...

  7. Socket.io + Knex 实现私聊聊天室

    前言 本文只介绍实现的核心代码,目的是记录和分享知识.若感兴趣可以往下看,在文章最后贴上了仓库地址.前端使用 Vite + Vue3:后端使用 Knex + Express. Room 的概念 私密 ...

  8. c# 使用 Redis

    1.安装Redis 我是在Windows上安装redis的,Redis官网我只看到linux版本的,得使用别人提供的windows版本 菜鸟教程提供的redis下载地址:https://github. ...

  9. 如何在 JavaScript 中使用媒体查询

    前言 说起媒体查询想必大家最先想到的都是CSS中@media,没错,这是我们最常用的媒体查询方法,主要用来为我们的网站做适配处理. 比如: h1 { font-size: 2rem; color: g ...

  10. K8S资源控制器

    什么是控制器 kubernetes中建立了很多的controller(控制器),这相当于一个控制机,来管理pod的状态和行为. 控制器的类型 ReplicationController和Replica ...