当前位置: 首页 > news >正文

vue原理分析(六)研究new Vue()

今天我们来分析使用new Vue()

之前研究时,只是说是在创建一个实例。并没有深入进行研究

在vue的源码中找下Vue的构造函数

function Vue(options) {if (!(this instanceof Vue)) {warn$2('Vue is a constructor and should be called with the `new` keyword');}this._init(options);}

if判断语句是指,需要用new 关键字来构造实例对象

后面就是 this._init(options)  调用了_init方法,参数是options

找到_init(options)方法

接下来我们逐句分析

Vue.prototype._init = function (options) {// 1. 定义变量对象vm  后续需要给vm添加属性,再将vm作为参数调用一系列函数const vm = this;// a uid// 2. vm添加_uid属性, 自增vm._uid = uid++;let startTag, endTag;// 3. istanbul ignore if 是一个注释指令,用于在代码覆盖率工具 Istanbul 中标记某段代码,以便在生成代码覆盖率报告时忽略该段代码的覆盖率计算// 从英文名猜下是关于performance性能的,暂时先不管它。后续有遇到再继续研究/* istanbul ignore if */if (config.performance && mark) {startTag = `vue-perf-start:${vm._uid}`;endTag = `vue-perf-end:${vm._uid}`;mark(startTag);}// a flag to mark this as a Vue instance without having to do instanceof// check// 4. vm添加_isVue属性vm._isVue = true;// avoid instances from being observed// 5. vm添加__v_skip属性vm.__v_skip = true;// effect scope// 6. vm添加_scope属性 _scope是new EffectScope()vm._scope = new EffectScope(true /* detached */);// #13134 edge case where a child component is manually created during the// render of a parent component// 7. vm._scope设置属性vm._scope.parent = undefined;vm._scope._vm = true;// merge options// 8. 核心代码,对于入参options进行判断// initInternalComponent(vm, options)  这个我们暂时还没有遇到过,先跳过// 或者mergeOptions()     一会儿研究if (options && options._isComponent) {// optimize internal component instantiation// since dynamic options merging is pretty slow, and none of the// internal component options needs special treatment.initInternalComponent(vm, options);}else {vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options || {}, vm);}/* istanbul ignore else */// 9. initProxy(vm)  一会儿研究{initProxy(vm);}// expose real self// 10. vm添加_self属性vm._self = vm;// 11. 调用一堆方法 一会儿研究initLifecycle(vm);initEvents(vm);initRender(vm);callHook$1(vm, 'beforeCreate', undefined, false /* setContext */);initInjections(vm); // resolve injections before data/propsinitState(vm);initProvide(vm); // resolve provide after data/propscallHook$1(vm, 'created');/* istanbul ignore if */// 12. 感觉又是跟性能有关的内容if (config.performance && mark) {vm._name = formatComponentName(vm, false);mark(endTag);measure(`vue ${vm._name} init`, startTag, endTag);}// 13.如果vm.$options有el参数,后续执行了$mount挂载if (vm.$options.el) {vm.$mount(vm.$options.el);}};

相关文章:

vue原理分析(六)研究new Vue()

今天我们来分析使用new Vue() 之前研究时,只是说是在创建一个实例。并没有深入进行研究 在vue的源码中找下Vue的构造函数 function Vue(options) {if (!(this instanceof Vue)) {warn$2(Vue is a constructor and should be called with the new keyword);}this.…...

滑动窗口+动态规划

前言:分析这个题目的时候,就知道要这两个线段要分开,但是要保证得到最优解,那么我们在选取第二根线段的时候,要保证我们第一根线段是左边最优解 并且我们选的两根线段的右端点一定是我们的数组的点(贪心思…...

vscode配置django环境并创建django项目

1、创建文件夹 创建文件夹 并在vscode打开 终端输入命令 “ python -m venv env ” 查看目录结构 2、创建项目 在终端输入 django-admin startproject 文件名(这里以myshop为例) 3、创建应用 在myshop打开终端 在终端输入 django-admin startapp 应用名 这里以app1为例…...

WebGL系列教程四(绘制彩色三角形)

目录 1 前言2 varying变量介绍3 开始绘制3.1 声明顶点着色器3.2 声明片元着色器3.3 创建顶点和颜色的缓冲区3.4 指定变量从缓冲区获取值3.5 效果3.6 varying的内涵3.7 完整代码 4 总结 1 前言 上一篇中我们介绍了如何使用缓冲区来绘制三角形,这一篇我们来讲讲如何给…...

通过mxGraph在ARMxy边缘计算网关上实现工业物联网

在当今的工业4.0时代,工业物联网(IIoT)已经成为制造业转型升级的关键技术之一。ARMxy边缘计算网关作为工业自动化和物联网的重要组成部分,能够为工厂车间提供实时的数据处理能力和智能化服务。而mxGraph作为一种流行的JavaScript库…...

GEE案例:利用sentinel-1数据进行洪水监测分析(直方图统计)

目录 简介 数据 函数 ee.Filter.calendarRange(start, end, field) Arguments: Returns: Filter updateMask(mask) Arguments: Returns: Image 代码 结果 简介 利用sentinel-1数据进行洪水监测分析 数据 COPERNICUS/S1_GRD数据是由欧洲空间局(ESA)的Copernicus项…...

QT 联合opencv 易错点

https://blog.csdn.net/qq_51699436/article/details/135777911 网上已经有大量优秀切详尽的文章来讲述QT联合opencv了,我把容易出错的点列出来备忘 1、在进行opencv进行编译时,要确认好是32位还是64位,因为在创建QT项目的时候QT和opencv要匹…...

例如/举例的使用方法 ,e.g., 以及etc的使用方法

e.g. 例如 for example for the sake of example such as 1 e.g. 是拉丁语 exempli gratia 的缩写意思是“举个例子,比如”,等同于for example、 for the sake of example、such as,使用 e.g. 的目的是用几个例子来说明前面的观点。 2 例…...

20240902-VSCode-1.19.1-部署vcpkg-win10-22h2

20240902-VSCode-1.19.1-部署vcpkg-win10-22h2 软件环境 标签:C++ VSCode mingw gcc13 vcpkg cmake分栏:C++操作系统:Windows10 x64 22h2一、安装VScode-1.19.1 请参考另一篇文章《20240717-VSCode-1.91.1-部署gcc13-C++23-win10-22h2》。 二、安装cmake 本文流程需要安…...

MySQL学习(多表操作)

基本知识 一对多 创建部门表 – 主表 create table if not exists dept(deptno varchar(20) primary key ,name varchar(20) );创建员工表 – 创建外键约束 方式1constraint emp_fk foreign key(dept_id) references dept(deptno) create table if not exists emp(eid varc…...

鸿蒙开发(NEXT/API 12)【网络连接管理】 网络篇

简介 网络连接管理提供管理网络一些基础能力,包括WiFi/蜂窝/Ethernet等多网络连接优先级管理、网络质量评估、订阅默认/指定网络连接状态变化、查询网络连接信息、DNS解析等功能。 说明 为了保证应用的运行效率,大部分API调用都是异步的,对…...

VMware Fusion虚拟机Mac版 安装Ubuntu操作系统教程

Mac分享吧 文章目录 下载镜像地址:[www.macfxb.cn](http://www.macfxb.cn)一、CentOS安装完成,软件打开效果二、Mac中安装Ubuntu虚拟机1️⃣:下载镜像2️⃣:创建虚拟机3️⃣:虚拟机设置4️⃣:虚拟机安装5️…...

基于SpringBoot+Vue+MySQL的房屋租赁管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 二十一世纪互联网的出现,改变了几千年以来人们的生活,不仅仅是生活物资的丰富,还有精神层次的丰富。在互联网诞生之前,地域位置往往是人们思想上不可跨域的鸿沟,信息的…...

虚拟机器配置固定IP地址

新安装的虚拟机,如何配置固定的ip地址,废话少说直接上干货 第一步:在VMarea中 选中你要固定IP的虚拟机器,点击上面的“编辑”按钮,然后找到“虚拟网络编辑器”,选中你要修改的ip VMnet8,然后是…...

用python实现基于形态学的方法,如开运算和闭运算,来去除pcd格式激光点云中的植被

在Python中,你可以使用open3d库来读取和处理pcd格式的点云数据。下面是一个示例代码,展示如何使用形态学操作来去除植被。 首先,确保你已经安装了open3d库,可以使用以下命令进行安装: pip install open3d接下来&…...

QT 绘制简易时钟

原文件 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);this->startTimer(1000); }Widget::~Widget() {delete ui; }//时钟底座 void Widget::paintEvent(Q…...

为控制器的方法添加必要参数

前言:做这个系统时,要求每次调用接口时要传操作人、操作人电脑ip、菜单id,然后计入log。本来前端读取到然后加入请求头,后端写入log即可。但是老大要求后端也要把控必传参数,避免前端忘记。所以就写了这个。IOperation…...

(计算机网络)应用层

1.为什么需要应用层 应用层提供使用tcp,udp使用的方式 协议就是制定的规则 2.域名服务器概述 域名是唯一的 新增域名,大家都要修改这个文本文件,所以要进行集中管理这个文本文件,而不是使用本地的hosts文件 hosts文件在Windows系统…...

使用3DUNet训练自己的数据集(pytorch)— 医疗影像分割

代码:lee-zq/3DUNet-Pytorch: 3DUNet implemented with pytorch (github.com) 文章<cicek16miccai.pdf (uni-freiburg.de)3D U-Net: Learning Dense Volumetric Segmentation...

【python】—— Python爬虫实战:爬取珠海市2011-2023年天气数据并保存为CSV文件

目录 目标 准备工作 爬取数据的开始时间和结束时间 爬取数据并解析 将数据转换为DataFrame并保存为CSV文件 本文将介绍如何使用Python编写一个简单的爬虫程序,以爬取珠海市2011年至2023年的天气数据,并将这些数据保存为CSV文件。我们将涉及到以下知识点: 使用r…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

【FTP】ftp文件传输会丢包吗?批量几百个文件传输,有一些文件没有传输完整,如何解决?

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...