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…...

U盘文件及文件夹带锁修复
磁盘管理修复工具Disks磁盘管理–针对U盘文件及文件夹带锁修复 本文章只针对统信系统 文章目录 功能概述一、安装工具二、数据备份三、检查文件系统1. 通过启动栏中的“磁盘”或者桌面的“磁盘”启动文件来启动应用:2. 选择U盘设备3. 点击“检查文件系统”按钮(如果无此按钮…...

AnyChart 数据可视化框架
AnyChart 数据可视化框架 AnyChart 是一个灵活的 JavaScript(HTML5、SVG、VML)图表框架,适合任何需要数据可视化的解决方案。 目录 下载并安装开始插件将 AnyChart 与 TypeScript 结合使用将 AnyChart 与 ECMAScript 6 结合使用技术集成贡献…...

ARM base instruction -- br
BR Branch to Register branches unconditionally to an address in a register, with a hint that this is not a subroutine return. 无条件地分支到寄存器中的一个地址,并提示这不是子例程返回。 BR <Xn> BR 跳转到reg内容地址,不会将返回地址…...

编译原理/软件工程核心概念-问题理解
目录 1.程序的编译执行过程 2.指针和引用的区别 3.堆和栈的区别 4.最熟悉的编程语言- Python:介绍PyTorch和TensorFlow框架 5.C与C的区别 6.软件工程是什么? 7.简述瀑布模型 8.敏捷开发方法是什么?它与瀑布模型相比有哪些优势和劣势 1…...

学习pyqt5相关知识回顾
1. 模块 1.1 import导入 1) 模块:是一系列功能的集合体,模块名.功能名,就可以使用模块的功能 2) 首次导入模块,就会立即执行模块里面的内容 3) 当前名称空间会产生一个名字module,指向module.py产生的名称空间.我们可以使用module.name/函数名,来调用module.py里面的内容. …...

OPENAIGC开发者大赛高校组银奖 | LonAC中小学编程学习平台
在第二届拯救者杯OPENAIGC开发者大赛中,涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到,我们特意开设了优秀作品报道专栏,旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者,希望能带给您…...

oneclick 命令:快速筛选控制变量的利器
目录 1. 命令语法2. 结果输出3. 使用示例4. 总结 在进行回归分析时,选择合适的控制变量对于确保模型的稳健性至关重要。然而,手动筛选变量组合不仅费时费力,还容易出错。为此,Stata 中的 oneclick 命令提供了一个高效的解决方案&a…...

Kotlin 代替Java接口回调,就这么简单
假如你使用旧的接口回调: 通常三步:1 定义接口和方法;2 使用接口中方法;3 继承接口并实现方法; 例: class XXXAdapter{public var mClickCollBack: clickCollBack? null //1定义interface clickColl…...

Codeforces Round 971 (Div. 4)——C题题解
本题的大意是一个青蛙从原点开始跳格子(0,0),最终要跳到点(x,y)去,并且每一步的步长不能超过k,问最短几步可以跳到终点 分析: 本题利用贪心思想,肯定是先跳最大的步长这样总体用的步数最长 代码演示: #inc…...

【论文阅读笔记】Tackling the Generative Learning Trilemma with Denoising Diffusion GANs
【论文阅读笔记】Tackling the Generative Learning Trilemma with Denoising Diffusion GANs Introduction方法 使用传统GANS建模去噪分布理解模式覆盖率 Paper:https://arxiv.org/abs/2112.07804 Code:https://github.com/NVlabs/denoising-diffusion-…...