vue Mutation 必须是同步函数为什么_为什么vue组件中data必须用函数表达？

2024-05-29 14:27:11

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

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

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

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

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

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

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

我们回过头来看当前组件

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

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

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

vue Mutation 必须是同步函数为什么_为什么vue组件中data必须用函数表达？相关推荐

组件中data为什么是函数
data是一个函数,但是返回的是一个对象,如果data直接是一个对象,会造成联动反应,即改变其中一个组件中的数据,其他的数据也会进行变化 <!DOCTYPE html> <html& ...
html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
组件中data为什么是个函数
总结: 1.vue中组件是用来复用,为了防止data复用,将它定义成一个函数. 2.当我们将组件中的data写成一个函数,数据是以函数返回值形式定义的,这样每复用一次data,都会返回一份新的data ...
习题 8.5 将本章的例8.4改写为一个多文件的程序：1.将类定义放在头文件arraymax.h中；2.将成员函数定义放在源文件arraymax.cpp中；3.主函数放在源文件file1.cpp中。
C++程序设计(第三版) 谭浩强习题8.5 个人设计习题 8.5 将本章的例8.4改写为一个多文件的程序: 1.将类定义放在头文件arraymax.h中: 2.将成员函数定义放在源文件arraym ...
ui vue 创建项目教程并关闭语法_创建vue项目流程
创建vue项目流程 1.使用构建工具vue-cli创建项目脚手架 vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建vue项目. (1)安装确认已安装了node.js ...
python多线程实现同步的方式_深入解析Python中的线程同步方法
同步访问共享资源在使用线程的时候,一个很重要的问题是要避免多个线程对同一变量或其它资源的访问冲突.一旦你稍不留神,重叠访问.在多个线程中修改(共享资源)等这些操作会导致各种各样的问题:更严重的是,这 ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
lambda函数，函数符_为什么您永远不应该在Lambda函数中使用print（）
lambda函数,函数符两个Lambda用户的故事 (A Tale of Two Lambda Users) 故事1:业余 (Tale #1: The Amateur) One moment eve ...
Vue中data为何以函数形式返回
data为何以函数形式返回在使用Vue构建组件化应用时,每个组件的data属性都是以函数形式返回的,这主要是在组件化实现的时候,每个实例可以维护一份被返回对象的独立的拷贝,而不是共享同一个对象的引用 ...
vue点击input框出现弹窗_使用vue实现各类弹出框组件
简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBa ...

最新文章

热门文章