Vue - 你知道Vue组件中的data为什么是一个函数吗

难度级别:中高级及以上                               提问概率:80% 


在Vue项目中,App.vue下的每个子组件都会生成一个单独的Vue实例对象,但这些子对象都是通过通过vue.extend方法创建而来的,也就是说我们平时在项目中所定义的Vue组件,都有一个相同的父类对象。这样也就导致了,所有的子组件最终所指向的内存空间是相同的。

但我们的需求是,子组件间的data数据是互相独立的,不能互相干扰,虽然很多时候我们都希望通过组件间数据共享,达到一个组件内数据变更,其他组件的数据也响应式变更的效果,但这些却属于开发人员主动操作的范围。所以组件间一定不能出现不受开发人员控制,data数据自动互相影响的情况。

通过读源码文件src/core/util/options.js和src/core/instance/init.js可知,Vue项目入口文件的new Vue的data属性可以是一个对象,因为这个最外层Vue实例对象只被new一次,不会再被复用。而我们自定义的这些Vue业务组件,都会通过vue.extend创建子类实例对象,然后把我们在业务组件中定义的data数据依赖通过mergeOptions方

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/799084.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS-PC/MOBILE技巧--PC

一、PC 端网页特效 1、元素偏移量 offset 系列 offset 概述 offset 就是偏移量,使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获取元素距离带有定位父元素的位置获取元素自身的大小(宽度高度&#xff0…

前端入门(认识HTML,CSS,JavaScript三件套)

目录 前言 HTML(构建) CSS(设计) JavaScript(互动) 总结 相关书籍推荐 前言 前端(Frontend)指的是与用户直接交互的部分,也称为客户端。在网站或者应用程序中&…

特别详细的Spring Cloud 系列教程1:服务注册中心Eureka的启动

Eureka已经被Spring Cloud继承在其子项目spring-cloud-netflix中&#xff0c;搭建Eureka Server的方式还是非常简单的。只需要通过一个独立的maven工程即可搭建Eureka Server。 我们引入spring cloud的依赖和eureka的依赖。 <dependencyManagement><!-- spring clo…

如何成为一名优秀的工程师下

身为工程师&#xff0c;理所当然要重视实践&#xff0c;自然科学不管发展到何时都离不开实验。 电子学本身就是 为了指导工程实践。所以不要谈空洞的理论。现在很多毕业生都面临这样的问题&#xff0c;总是谈一些空洞的理论&#xff0c;甚至错误的但还不以为然的理论。实践可以…

uniapp 密码框的眼睛

效果展示&#xff1a; uniapp input 官网链接&#xff1a;链接 按照官方文档&#xff0c;uni-icon出不来。 通过自己的方法解决了&#xff0c;解决方案如下&#xff1a; 代码&#xff1a; <uni-forms-item name"password"><inputclass"uni-input&quo…

Spring AI 来了,打造Java生态大模型应用开发新框架!

Spring AI 来了&#xff0c;打造Java生态大模型应用开发新框架&#xff01; Spring AI 开发框架设计理念Spring AI 主要功能特性如下 Spring AI 应用开发案例案例一&#xff1a;基于大模型的对话应用开发案例二&#xff1a;RAG 检索增强应用开发案例三&#xff1a;Function Cal…

15-1-Flex布局

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 Flex布局1 Flex容器和Flex项目2 Flex 容器属性2.1 主轴的方向2.2 主轴对齐方式…

vscode-插件开发-hello world-创建初始模板

参考vscode官方示例&#xff1a;如何创建你的第一个插件开发项目模板的步骤进行了下文操作。 目录 前言1.环境配置全局安装 yo, generator-code 2. 新建一个插件项目模板问题1: F5 按键无法启动launch.json调试(解决)问题1 描述:问题1: 找错误问题1: 可行的解决方案 3. 开发插…

SpringBoot集成Redis快速入门Demo

目录 1. Redis概述 2.下载安装 3. Spring-data-redis概述 4. 快速入门 4.1 创建工程 4.2 导入依赖 4.3 添加配置文件 4.4 添加Redis配置 4.5 添加Redis工具类 4.6 添加测试类 5. Demo下载地址 1. Redis概述 Redis&#xff08;Remote Dictionary Server 远程…

ics-05-攻防世界

题目 点了半天只有设备维护中心能进去 御剑扫一下 找到一个css 没什么用 再点击云平台设备维护中心url发生了变化 设备维护中心http://61.147.171.105:65103/index.php?pageindex试一下php伪协议 php://filter/readconvert.base64-encode/resourceindex.php base64解一下…

华为海思校园招聘-芯片-数字 IC 方向 题目分享——第九套

华为海思校园招聘-芯片-数字 IC 方向 题目分享&#xff08;有参考答案&#xff09;——第九套 部分题目分享&#xff0c;完整版获取&#xff08;WX:didadidadidida313&#xff0c;加我备注&#xff1a;CSDN huawei数字芯片题目&#xff0c;谢绝白嫖哈&#xff09; 单选 1&…

(Git) gitignore基础使用

文章目录 前言.gitignore 模式匹配注释 #转义 \直接匹配任意字符匹配 *单个字符匹配 ?目录分割 /多级目录 **范围匹配 []取消匹配 ! 检查是否生效父子文件END 前言 Git - gitignore Documentation (git-scm.com) 在使用git管理的项目中&#xff0c;可以通过.gitignore文件管理…

【Redis 知识储备】冷热分离架构 -- 分布系统的演进(5)

冷热分离架构 简介出现原因架构工作原理技术案例架构优缺点 简介 引入缓存, 实行冷热分离, 将热点数据放到缓存中快速响应 (如存储到 Redis中) 出现原因 海量的请求导致数据库负载过高, 站点响应再读变慢 架构工作原理 多了缓存服务器, 对于热点数据全部到缓存中, 不常用数…

【Redis 知识储备】垂直分库架构 -- 分布系统的演进(6)

垂直分库架构 简介出现原因架构工作原理技术案例架构优缺点 简介 数据库的数据被拆分, 数据库分布式存储, 分布式处理, 分布式查询, 也可以理解为分布式数据库框架 出现原因 单机的写库会逐渐会达到性能瓶颈, 需要拆分数据库, 数据表的数据量太大, 处理压力太大, 需要进行分…

阿里云服务器可以干什么?阿里云服务器主要用途是干嘛的?

阿里云服务器可以干嘛&#xff1f;能干啥你还不知道么&#xff01;简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等&#xff0c;阿里云百科aliyunbaike.com整理阿里云服务器的用途&#xff1a; 阿里云服务器活动 aliyunbaike.com…

armlinux裸机-uart

uart是一对一的串行异步全双工通信通信协议&#xff0c;串行速度较慢&#xff08;usart支持同步通信&#xff09; 传输原理 多个参数可以设置 为满足使用需求&#xff0c;我们一般都用带fifo缓冲中断。 我们使用S3C2440芯片&#xff0c;具体寄存器操作可以查看用户手册

ES入门十四:分词器

我们存储到ES中数据大致分为以下两种&#xff1a; 全文本&#xff0c;例如文章内容、通知内容精确值&#xff0c;如实体Id 在对这两类值进行查询的时候&#xff0c;精确值类型会比较它们的二进制&#xff0c;其结果只有相等或者不想等。而对全文本类型进行等值比较是不太实现…

【深度学习】StableDiffusion的组件解析,运行一些基础组件效果

文章目录 前言vaeclipUNetunet训练帮助、问询 前言 看了篇文&#xff1a; https://zhuanlan.zhihu.com/p/617134893 运行一些组件试试效果。 vae 代码&#xff1a; import torch from diffusers import AutoencoderKL import numpy as np from PIL import Image# 加载模型…

Redis分布式锁误删情况说明

4.4 Redis分布式锁误删情况说明 逻辑说明&#xff1a; 持有锁的线程在锁的内部出现了阻塞&#xff0c;导致他的锁自动释放&#xff0c;这时其他线程&#xff0c;线程2来尝试获得锁&#xff0c;就拿到了这把锁&#xff0c;然后线程2在持有锁执行过程中&#xff0c;线程1反应过…

Linux 命令完全手册(1),受益匪浅

第一列返回的是行数&#xff0c;第二列是字数&#xff0c;第三列则是比特数。 我们可以让它只计算行数&#xff1a; wc -l test.txt 或者只计算字数&#xff1a; wc -w test.txt 或者只计算比特数&#xff1a; wc -c test.txt 在 ASCII 字符集中&#xff0c;比特数等于字…