当前位置: 首页 > 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);}};

http://www.lryc.cn/news/435630.html

相关文章:

  • 滑动窗口+动态规划
  • vscode配置django环境并创建django项目
  • WebGL系列教程四(绘制彩色三角形)
  • 通过mxGraph在ARMxy边缘计算网关上实现工业物联网
  • GEE案例:利用sentinel-1数据进行洪水监测分析(直方图统计)
  • QT 联合opencv 易错点
  • 例如/举例的使用方法 ,e.g., 以及etc的使用方法
  • 20240902-VSCode-1.19.1-部署vcpkg-win10-22h2
  • MySQL学习(多表操作)
  • 鸿蒙开发(NEXT/API 12)【网络连接管理】 网络篇
  • VMware Fusion虚拟机Mac版 安装Ubuntu操作系统教程
  • 基于SpringBoot+Vue+MySQL的房屋租赁管理系统
  • 虚拟机器配置固定IP地址
  • 用python实现基于形态学的方法,如开运算和闭运算,来去除pcd格式激光点云中的植被
  • QT 绘制简易时钟
  • 为控制器的方法添加必要参数
  • (计算机网络)应用层
  • 使用3DUNet训练自己的数据集(pytorch)— 医疗影像分割
  • 【python】—— Python爬虫实战:爬取珠海市2011-2023年天气数据并保存为CSV文件
  • U盘文件及文件夹带锁修复
  • AnyChart 数据可视化框架
  • ARM base instruction -- br
  • 编译原理/软件工程核心概念-问题理解
  • 学习pyqt5相关知识回顾
  • OPENAIGC开发者大赛高校组银奖 | LonAC中小学编程学习平台
  • oneclick 命令:快速筛选控制变量的利器
  • Kotlin 代替Java接口回调,就这么简单
  • Codeforces Round 971 (Div. 4)——C题题解
  • 【论文阅读笔记】Tackling the Generative Learning Trilemma with Denoising Diffusion GANs
  • 常见 HTTP 状态码详解与Nginx 文件上传大小限制