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

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

ShardingProxy读写分离之原理、配置与实践过程

《ShardingProxy读写分离之原理、配置与实践过程》ShardingProxy是ApacheShardingSphere的数据库中间件,通过三层架构实现读写分离,解决高并发场景下数据库性能瓶... 目录一、ShardingProxy技术定位与读写分离核心价值1.1 技术定位1.2 读写分离核心价值二

深度解析Python中递归下降解析器的原理与实现

《深度解析Python中递归下降解析器的原理与实现》在编译器设计、配置文件处理和数据转换领域,递归下降解析器是最常用且最直观的解析技术,本文将详细介绍递归下降解析器的原理与实现,感兴趣的小伙伴可以跟随... 目录引言:解析器的核心价值一、递归下降解析器基础1.1 核心概念解析1.2 基本架构二、简单算术表达

深入浅出Spring中的@Autowired自动注入的工作原理及实践应用

《深入浅出Spring中的@Autowired自动注入的工作原理及实践应用》在Spring框架的学习旅程中,@Autowired无疑是一个高频出现却又让初学者头疼的注解,它看似简单,却蕴含着Sprin... 目录深入浅出Spring中的@Autowired:自动注入的奥秘什么是依赖注入?@Autowired

从原理到实战解析Java Stream 的并行流性能优化

《从原理到实战解析JavaStream的并行流性能优化》本文给大家介绍JavaStream的并行流性能优化:从原理到实战的全攻略,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的... 目录一、并行流的核心原理与适用场景二、性能优化的核心策略1. 合理设置并行度:打破默认阈值2. 避免装箱

Go之errors.New和fmt.Errorf 的区别小结

《Go之errors.New和fmt.Errorf的区别小结》本文主要介绍了Go之errors.New和fmt.Errorf的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考... 目录error的基本用法1. 获取错误信息2. 在条件判断中使用基本区别1.函数签名2.使用场景详细对

Python中的filter() 函数的工作原理及应用技巧

《Python中的filter()函数的工作原理及应用技巧》Python的filter()函数用于筛选序列元素,返回迭代器,适合函数式编程,相比列表推导式,内存更优,尤其适用于大数据集,结合lamb... 目录前言一、基本概念基本语法二、使用方式1. 使用 lambda 函数2. 使用普通函数3. 使用 N