当前位置: 首页 > 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…...

AndroidCupsPrint:构建企业级Android打印服务架构的技术实践

AndroidCupsPrint&#xff1a;构建企业级Android打印服务架构的技术实践 【免费下载链接】AndroidCupsPrint Port of cups4j to Android. Allows wireless printing from any Android device to any CUPS-enabled print server or network printer. 项目地址: https://gitcod…...

Sunshine终极指南:8步搭建你的个人游戏串流服务器

Sunshine终极指南&#xff1a;8步搭建你的个人游戏串流服务器 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 想要在任何设备上流畅玩PC游戏吗&#xff1f;Sunshine是一款免费开源…...

放大电路性能

放大电路的性能指标是用来衡量其“好”与“坏”的客观参数&#xff0c;主要包括以下几个方面&#xff0c;可以按增益、阻抗、频率特性、失真/噪声、稳定性/效率等分类。一、基本放大能力指标含义常用表达式备注电压增益 Av​输出电压与输入电压之比Av​Vout​/Vin​最核心指标&…...

Keil MDK-ARM许可证错误-25的解决方案

1. 问题现象与背景解析最近在升级Keil MDK-ARM到新版本后&#xff0c;不少开发者遇到了一个棘手的许可证错误。当尝试编译项目时&#xff0c;系统会弹出如下错误提示&#xff1a;Error: A9555E: License checkout for feature mdk_xxx_compiler5 with version 5.0201411 has be…...

FPGA无人机电源设计:集成PMIC方案如何解决多路供电与空间挑战

1. 项目概述与核心挑战最近在做一个由FPGA控制的无人机项目&#xff0c;其中电源管理系统的设计让我感触颇深。无人机这玩意儿&#xff0c;飞控、图传、传感器一个比一个耗电&#xff0c;但留给电源和PCB的空间却极其有限。更头疼的是&#xff0c;主控用上了高性能的FPGA或SoC&…...

氨基酸表活洁面慕斯科普

一、什么是洁面慕斯洁面慕斯是一种预发泡型的洁面产品&#xff0c;和传统膏状、洗面奶不同&#xff0c;它从泵头挤出来就是细腻绵密的泡沫&#xff0c;不需要消费者手动打泡&#xff0c;使用起来更加方便快捷。从成分体系来看&#xff0c;洁面慕斯本质还是表面活性剂清洁产品&a…...

使用 curl 命令直接测试 Taotoken 聊天补全接口的步骤详解

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用 curl 命令直接测试 Taotoken 聊天补全接口的步骤详解 在开发或调试大模型应用时&#xff0c;有时我们希望在脱离特定编程语言…...

OPNsense安装选UFS还是ZFS?从硬件选择到文件系统性能的完整决策指南

OPNsense安装选UFS还是ZFS&#xff1f;从硬件选择到文件系统性能的完整决策指南 在部署OPNsense防火墙时&#xff0c;文件系统选择往往被忽视&#xff0c;却直接影响系统性能、数据安全和运维效率。UFS和ZFS的抉择不仅关乎安装时的选项勾选&#xff0c;更关系到长期运行的稳定性…...

从理论到实践:用Magma解锁代数计算新维度

1. 为什么你需要Magma这个代数计算神器 第一次接触Magma是在研究生时期&#xff0c;当时我需要计算一个椭圆曲线上的有理点。用Matlab折腾了整整一周毫无进展&#xff0c;导师随手扔给我一个Magma代码示例&#xff0c;三行命令就解决了问题。那一刻我才明白&#xff0c;专业的事…...

LinkSwift:九大网盘直链下载的终极解决方案,快速获取真实下载地址

LinkSwift&#xff1a;九大网盘直链下载的终极解决方案&#xff0c;快速获取真实下载地址 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘…...