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…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
算法笔记2
1.字符串拼接最好用StringBuilder,不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践
作者:吴岐诗,杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言:融合数据湖与数仓的创新之路 在数字金融时代,数据已成为金融机构的核心竞争力。杭银消费金…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ,这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器,右键点击 .uproject 文件,选择 "Generate Visual Studio project files",重…...
