首页 > 其他分享 >vue组件中的data为什么是一个函数?

vue组件中的data为什么是一个函数?

时间:2022-08-27 14:22:36浏览次数:46  
标签:vue 函数 对象 实例 组件 data

为什么data为什么是一个函数而不是一个对象?

原因是因为如果data是一个对象的话,两个组件中设置的data都会引用同一个内存地址,而用函数的话,则会在每次引用的时候返回一个新的地址。

如果使用对象形式定义data的话,就会导致创建的对象身上的data属性会指向同一个地址:

var Component = function () {};
Component.prototype.data = {
            message: '10'
}
var component1 = new Component(), component2 = new Component(); 
component1.data.message = '20'; 
console.log(component2.data.message);
输出是:20

 

实例和组件定义data的区别:

vue实例定义data属性既可以是对象,也可以是函数。而组件中定于data属性,就只能是一个函数。组件中如果改成函数形式的话会报错的。

 

vue中data为什么必须是个函数?

1.Vue 中的 data 必须是个函数,因为当data是函数时,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。

简单来说,就是为了保证组件的独立性和可复用性,如果data是个函数的话,每复用一次组件就会返回新的data,类似于给每个组件实例创建一个私有的数据空间,保护各自的数据互不影响。

2.一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。

标签:vue,函数,对象,实例,组件,data
From: https://www.cnblogs.com/angel648/p/16630502.html

相关文章

  • 从外部存储的结构化文件创建DataFrame---常用的一种方式
    1.从txt文件中创建DataFrame从txt文件中创建DataFrame如果是从普通的文本文件创建DataFrame文件中的列和列的分隔符不清楚所以创建的DataFrame只有一列,一......
  • 从关系型数据库中创建DataFrame
    说明:/*需要引入依赖<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version......
  • 从Hive中使用HQL语句创建DataFrame--常用方式
    默认情况下SparkSession不支持读取Hive中的数据,也不支持操作HQL语法,如果要读取Hive中的数据,需要开启Hive的支持,构建sparkSession的时候调用一个函数enableHiveSupport()......
  • 幂等公共组件
    前言今天想聊一聊幂等相关的知识,以及实现一个幂等公共组件需要重点涉及和思考的点。概念首先,什么是幂等,在实际代码生产过程中有什么作用呢?在编程中一个幂等操作的特点......
  • vue首屏白屏原因及解决办法
    vue首屏白屏原因大概有以下几点:一.路由模式错误由于把路由模式mode设置成history了,默认是hash解决方法:改为hash或者直接删除模式配置,如果非要用的话,在服务端加一个覆盖......
  • vue使用组件<el-date-picker>报错:Avoid mutating a prop directly since the value will
    Vue使用element-ui组件库中的<el-data-picker>标签报错报以下错误,最开始我以为是props通信的问题,但后来发现是版本出现问题导致的解决办法:版本2.14.1的版本已经都不可......
  • ASP.NET Core 6.0+Vue.js 3 实战开发(视频)
    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章或视频能成为你成长路上的垫脚石。录制视频的体验这是一个收费的视频,很抱歉,让您失望了。我尝试......
  • vue3 基础-常用模板语法
    一个vue的单文件SAP(singlepagewebapplication)即在一个.vue为后缀的文件中,会包含3个部分.模板:html逻辑:javascript样式:css这种同时存在,然......
  • vue3使用wangeditor富文本编辑器
     npm下载 1npmiwangeditor-S       在要使用的页面导入1importEWangEditorfrom"wangeditor";2import{onMounted,reactive}from"vue";......
  • 教程 - 深度探讨在 Vue3 中引入 CesiumJS 的最佳方式
    目录1.你应该先知道的基础知识1.1.CesiumJS的库构成1.2.选择Vite3和pnpm的理由1.3.使用External模式引入静态库-不打包静态库1.4.切勿什么都import-以及......