组件中的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?免费账号

      可以查看这里给大家提供了一些免费的账号供大家尝试 note.youdao.com/s/OvxaLZiF   ChatGPT作为最近火遍互联网的AI项目,获得了大家空前的关注,短短两个多月注册人数破 ...

  2. C++练习4 引用的定义与使用

    使用 & 为变量和常量作为引用 1 #include <iostream> 2 using namespace std; 3 int main() 4 { 5 int oneInt ...

  3. python爬虫(含scrapy)

    python爬虫 1.解析HTML: lxml 是一种python编写的库,可以迅速.灵活的处理xml和html 使用:根据版本的不同,有如下两种: 形式1: from lxml import etr ...

  4. Eureka高可用集群服务端和客户端配置

    微服务应用中,生产环境一般都需要保障服务注册中心的高可用!高可用也分好几个等级,例如:同数据中心(可用Zone区)高可用-->同地域(Region)跨数据中心(可用Zone区)高可用--> ...

  5. Linux操作命令(五)1.find命令 2.xargs命令

    1.find命令(一) 查找,沿着文件层次结构向下遍历,匹配符合条件的文件,并执行相应的操作 参数 描述 -print find 命令将匹配的文件输出到标准输出 -exec find 命令对匹配的文件 ...

  6. 随机颜色,加载loading效果,节流,应用周期函数,wxs

    随机颜色 data: { colorList:[] }, getColor(){ wx.request({ url: 'https://www.escook.cn/api/color', method ...

  7. vue框架3

    js的几种循环方式 1.v-for可以循环的变量 <!DOCTYPE html> <html lang="en"> <head> <met ...

  8. C#得到和JAVA通过Base64.encodeBase64String(DigestUtils.md5(""))加密后的字符串

    public static string GetMd5(string Str) { MD5 md5Hash = MD5.Create(); // 将输入字符串转换为字节数组并计算哈希数据 byte[] ...

  9. c++获取类型信息

    获取类型信息 typeid typeid运算符用来获取一个表达式的类型信息. 对于基本类型数据, 类型信息比较简单, 主要指数据的类型; 对于对象(类类型的数据), 类型信息指: 对象所属的类, 所包 ...

  10. CSS3图片自适应各种尺寸的屏幕

    img {    max-width: 100%;    height: auto;} 设置最大宽度,高度自适应.