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

2024-09-07 21:36

本文主要是介绍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()的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1146227

相关文章

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

Spring Boot循环依赖原理、解决方案与最佳实践(全解析)

《SpringBoot循环依赖原理、解决方案与最佳实践(全解析)》循环依赖指两个或多个Bean相互直接或间接引用,形成闭环依赖关系,:本文主要介绍SpringBoot循环依赖原理、解决方案与最... 目录一、循环依赖的本质与危害1.1 什么是循环依赖?1.2 核心危害二、Spring的三级缓存机制2.1 三

C#中async await异步关键字用法和异步的底层原理全解析

《C#中asyncawait异步关键字用法和异步的底层原理全解析》:本文主要介绍C#中asyncawait异步关键字用法和异步的底层原理全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录C#异步编程一、异步编程基础二、异步方法的工作原理三、代码示例四、编译后的底层实现五、总结C#异步编程

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Python中的魔术方法__new__详解

《Python中的魔术方法__new__详解》:本文主要介绍Python中的魔术方法__new__的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、核心意义与机制1.1 构造过程原理1.2 与 __init__ 对比二、核心功能解析2.1 核心能力2.2

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Python 迭代器和生成器概念及场景分析

《Python迭代器和生成器概念及场景分析》yield是Python中实现惰性计算和协程的核心工具,结合send()、throw()、close()等方法,能够构建高效、灵活的数据流和控制流模型,这... 目录迭代器的介绍自定义迭代器省略的迭代器生产器的介绍yield的普通用法yield的高级用法yidle