组件中的data为什么不是一个对象而是一个函数?
组件中的data为什么不是一个对象而是一个函数?
组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响。
组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
组件中的data为什么不是一个对象而是一个函数?的更多相关文章
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- vue组件中的data与methods
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- 黑马vue---59-60、组件中的data和methods
黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...
- 第六章 组件 56 组件-组件中的data
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue-为什么子组件中的data选项必须是函数?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 组件中的data数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 为什么vue组件中的data不是一个对象而是一个函数
如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰. 这是因为JavaScript的特性所导致,在component ...
随机推荐
- 还不来了解ChatGPT?免费账号
可以查看这里给大家提供了一些免费的账号供大家尝试 note.youdao.com/s/OvxaLZiF ChatGPT作为最近火遍互联网的AI项目,获得了大家空前的关注,短短两个多月注册人数破 ...
- C++练习4 引用的定义与使用
使用 & 为变量和常量作为引用 1 #include <iostream> 2 using namespace std; 3 int main() 4 { 5 int oneInt ...
- python爬虫(含scrapy)
python爬虫 1.解析HTML: lxml 是一种python编写的库,可以迅速.灵活的处理xml和html 使用:根据版本的不同,有如下两种: 形式1: from lxml import etr ...
- Eureka高可用集群服务端和客户端配置
微服务应用中,生产环境一般都需要保障服务注册中心的高可用!高可用也分好几个等级,例如:同数据中心(可用Zone区)高可用-->同地域(Region)跨数据中心(可用Zone区)高可用--> ...
- Linux操作命令(五)1.find命令 2.xargs命令
1.find命令(一) 查找,沿着文件层次结构向下遍历,匹配符合条件的文件,并执行相应的操作 参数 描述 -print find 命令将匹配的文件输出到标准输出 -exec find 命令对匹配的文件 ...
- 随机颜色,加载loading效果,节流,应用周期函数,wxs
随机颜色 data: { colorList:[] }, getColor(){ wx.request({ url: 'https://www.escook.cn/api/color', method ...
- vue框架3
js的几种循环方式 1.v-for可以循环的变量 <!DOCTYPE html> <html lang="en"> <head> <met ...
- C#得到和JAVA通过Base64.encodeBase64String(DigestUtils.md5(""))加密后的字符串
public static string GetMd5(string Str) { MD5 md5Hash = MD5.Create(); // 将输入字符串转换为字节数组并计算哈希数据 byte[] ...
- c++获取类型信息
获取类型信息 typeid typeid运算符用来获取一个表达式的类型信息. 对于基本类型数据, 类型信息比较简单, 主要指数据的类型; 对于对象(类类型的数据), 类型信息指: 对象所属的类, 所包 ...
- CSS3图片自适应各种尺寸的屏幕
img { max-width: 100%; height: auto;} 设置最大宽度,高度自适应.