vue 改变组件data_为什么vue组件中data必须用函数表达？

今天我就拿我的这篇文章来做个开头吧。

看到这个问题可能很多人都并可以注意过这个问题，问什么在脚手架中的.vue文件中data不能用对象来表达，而是必须使用函数的形式来表达呢？大家可能也不知道为什么这么设计？

实际上这是很有学问的，当初框架设计的时候，都是想了很多可能会出现的问题的。

首先我们做一个类比，如下代码：

对三个不同的变量obj1，obj2，obj3进行赋值，并且都是调用方法abc()，也就是说创建了三个不一样的实例，所以返回的此方法返回的值，就被赋值给了不同的地址。因此这三个变量的内存地址是不同的，此时改变其中一个变量的值，其他两个变量的值是不会跟随发生改变的。

我们此时在做一个类比，如下图：

我们首先声明一个常量obj(假设被储存在内存地址0x100)，再写一个函数abc()其返回值为刚刚定义的常量obj(返回的值指向地址0x100)。所以我们对三个变量obj1，obj2，obj3进行赋值abc(),都是指向0x100的地址，此时更改其中一个变量的值，我们就会发现其他两个变量的值也随之改变。如下图解释：

我们回过头来看当前组件

当前组件为，如果我们在实例中多次使用当前组件的话如下：

如果我们把组件里面的data改成一个对象的话，如下图：

data此时是一个对象，里面存放着很多数据，都是指向同一个地址。此时如果重复的使用相同的当前组件，每一个组件用的值都是从这个data:{}对象中取得(也就是说都是从同一个地址中取值)，就对组件之间造成了相互干扰。同理，我们就可以知道组件中的data使用函数然后返回一个对象的话，就不会存在这个问题了，因为在创建不同组件的时候，会return出不同地址的对象，并不存在干扰组件之间的数据绑定之类的问题

vue 改变组件data_为什么vue组件中data必须用函数表达？相关推荐

组件中data为什么是函数
data是一个函数,但是返回的是一个对象,如果data直接是一个对象,会造成联动反应,即改变其中一个组件中的数据,其他的数据也会进行变化 <!DOCTYPE html> <html& ...
Vue中data为何以函数形式返回
data为何以函数形式返回在使用Vue构建组件化应用时,每个组件的data属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用 ...
int在matlab中的作用,int函数表达的是什么意思
int函数表达的是什么意思 int函数相信不少人都没听说过,更别说会知道它表达的是什么意思.为此百分网小编为大家带来int函数表达的意思. int函数表达的意思 C/C++编程语言中,int表示整型变 ...
vue改变html的背景,vue动态改变背景图片demo分享
如下所示: #bag{ width: 200px; height: 500px; margin: 0 auto; background: url(img/piao11.jpg) center no-r ...
Vue 组件传值通信、父子组件、爷孙组件传值、方法调用
组件传:vue子组件改变父组件中data的值_mldwyy的博客-CSDN博客_子组件修改父组件data 参考 https://www.cnblogs.com/lianxisheng/p/109073 ...
vue中data定义数字类型_[乐意黎原创] Vue中data定义的三种方式和区别
在 Vue中,定义data时,经常有好几种写法,一不小心会混淆,这里彻底详述一下,以便记分清 . 一.在vue中,定义data可以有三种写法. 1. 第一种写法,data是一个对象. var app ...
vue父组件ajax改变数据,vue父组件传了变量给子组件，改变子组件的对象时，父组件也跟着改变...
1.问题场景首先我在父页面引用了一个子组件,当点击的时候我会传值给子组件 showItem(stepJsonItem: any) { var viewDlg = this.$refs.viewIte ...
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
语雀原文有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源公司项目有个甘特图的需求. 笔者考察了世面上常见的甘特图组件后,本着我上我也行的心态,以及考虑 ...
html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
vue 父循环怎么拿子循环中的值_Vue 父组件循环使用refs调用子组件方法出现undefined的问题...
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

vue 改变组件data_为什么vue组件中data必须用函数表达？

vue 改变组件data_为什么vue组件中data必须用函数表达？相关推荐

最新文章

热门文章