一. 如何集成TS到当前技术栈 1.1 安装依赖 安装typescript和ts-loader,注意ts和ts-loader版本需要配套。由于当前技术栈的vue版本为2.5.2,建议typescript版本选择2.7.2,对应的ts-loa ...
基于 Vue.2 技术栈集成 TS 的可行性研究 6 years ago
深入SourceMap原理
sourcemap 对于前端来说一定是一个不陌生的概念,今天就带大家从原理层面来解析 sourcemap,发现其背后的秘密。 ...
人人都能懂的Vue源码系列—09—initEvents
上篇文章中,我们主要讲了initLiftcycle方法,它的作用是初始化vm实例中和生命周期相关的属性。今天为大家介绍另一个方法——initEvents。 从这个方法的名称来看,我们知道它是和事件相关的方法,具体怎么相关,我们先来看源码。 export function initEvents (vm: Componen ...
人人都能懂的Vue源码系列—08—initLifecycle
上篇文章,我们讲了vm._renderProxy相关的内容。主要是通过Proxy为我们vm属性添加一些自定义的行为。今天我们回到init方法中,为大家讲解initLifecycle。 initLifeCycle方法用来初始化一些生命周期相关的属性,以及为parent,child等属性赋值,来看源码。 export fu ...
人人都能懂的Vue源码系列—07—initProxy
前几篇文章中,我们主要讲了merge options的一些操作。今天我们回到init方法往下讲。 if (process.env.NODE_ENV !== ‘production’) { initProxy(vm) } else { vm._renderProxy = vm } 上面的代码逻辑很简单,主要就是 ...
人人都能懂的Vue源码系列—06—mergeOptions-下
上篇文章,我们讲到了mergeOptions的部分实现,今天接着前面的部分讲解,来看代码,如果大家觉得看讲解枯燥可以直接翻到本文的最后看mergeOptions的整个流程图。 const extendsFrom = child.extends if (extendsFrom) { parent = me ...
人人都能懂的Vue源码系列—05—mergeOptions-上
前几篇文章中我们讲到了resolveConstructorOptions,它的主要功能是解析当前实例构造函数上的options,不太明白的同学们可以看本系列的前几篇文章。在解析完其构造函数上的options之后,需要把构造函数上的options和实例化时传入的options进行合并操作并生成一个新的options。 这 ...
人人都能懂的Vue源码系列—04—resolveConstructorOptions函数-下
上一篇文章中说道,resolveConstructorOptions函数要分两种情况进行说明,第一种是Ctor为基础构造器的情况,这个已经向大家介绍过了,今天这篇文章主要介绍第二种情况,Ctor是Vue.extend创建的"子类"。 Ctor是Vue.extend创建的"子类" ...
人人都能懂的Vue源码系列—03—resolveConstructorOptions函数-上
上篇文章介绍了Vue构造函数的部分实现,当前Vue实例不是组件时,会执行mergeOptions方法。 vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) merge ...
人人都能懂的Vue源码系列—02—Vue构造函数
上篇博文中说到了Vue源码的目录结构是什么样的,每个目录的作用我们应该也有所了解。我们知道core/instance目录主要是用来实例化Vue对象,所以我们在这个目录下面去寻找Vue构造函数。果然我们找到了Vue的构造函数定义。 function Vue (options) { if (process.env.N ...