前言 让我们一起动手完成一个项目，来快速上手Rust！本章将介绍Rust中一些常用概念，并向您展示如何在实际项目中运用它们。您将会学到let、match、方法、关联函数、引用外部crate等知识！后续章节会深入探讨这些概念的细节。 内容 我们会实现一个经典的新手编程问题：猜数字游戏。这是它的工作原理：程序会随机生成一个1到100之间的整数。接着它会提示玩家猜一个数并输入，然后指出猜测是大了还是小了。如果猜对了，它会打印祝贺信息并退出。 创建项目 首先我们使用cargo在我们学习的项目下，创建一个新的项目guessing_game，命令如下： $cargonewguessing_game $cd...

前言 今天我们来解密下init.ts中的代码内容，并结合vue生命周期来分析下vue的初始化； GitHubgithubpage 内容 init.ts importconfigfrom'../config' import{initProxy}from'./proxy' import{initState}from'./state' import{initRender}from'./render' import{initEvents}from'./events' import{mark,measure}from'../util/perf' import{initLifecycle,callHoo...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们详细的了解下具体的内容;这块建议搭建可以根据demo进行debugger来观察； 内容 这一块主要围绕init.ts中的mergeOptions进行剖析。 mergeOptions mergeOptions的方法位于scr/core/util/options.ts中； / Optionoverwritingstrategiesarefunctionsthathandle howtomergeaparentoptionvalueandachildoption valueintothefinalvalue. 选项合并策略处理合并...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们详细的了解下具体的内容；这块建议搭建可以根据demo进行debugger来观察； 内容 这一块主要围绕init.ts中的initLifecycle进行剖析。 initLifecycle initLifecycle的方法位于scr/core/instance/lifecycle.ts中； exportfunctioninitLifecycle(vm:Component){ //合并后的options constoptions=vm.$options //locatefirstnon-abstractparent letpar...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们详细的了解下具体的内容; 内容 这一块主要围绕init.ts中的initEvents进行剖析，初始化生命周期之后紧接着。 initEvents initEvents的方法位于scr/core/instance/events.ts中； exportfunctioninitEvents(vm:Component){ //创建一个空对象存放_events vm._events=Object.create(null) //创建一个生命周期监听事件的标识属性 //HookEvent可以从组件外部为组件注入额外的生命周期方法 vm._h...

前言 在initEvents中发现的有意思的东西，就是Vue针对Error的处理，说实话之前压根没在意过Vue是如何收集处理Error的； errorHandler：https://v2.cn.vuejs.org/v2/apierrorHandler ?>从2.2.0起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是undefined时，被捕获的错误会通过console.error输出而避免应用崩溃。 ?>从2.4.0起，这个钩子也会捕获Vue自定义事件处理函数内部的错误了。 ?>从2.6.0起，这个钩子也会捕获v-onDOM监听器内部抛出的错误。另外，如果任...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们详细的了解下具体的内容; 内容 这一块主要围绕init.ts中的initRender进行剖析，参数合并完成之后就开始了初始化生命周期。 initRender initRender位于src/core/instance/render.ts exportfunctioninitRender(vm:Component){ vm._vnode=null//therootofthechildtree vm._staticTrees=null//v-oncecachedtrees constoptions=vm.$options con...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们详细的了解下具体的内容; 内容 这一块主要围绕init.ts中的initInjections进行剖析，初始化生命周期之后紧接着。 initInjections initInjections的方法位于scr/core/instance/inject.ts中； exportfunctioninitInjections(vm:Component){ //解析inject，返回解析后的对象 constresult=resolveInject(vm.$options.inject,vm) if(result){ //这里是为了告诉de...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们详细的了解下具体的内容; 内容 这一块主要围绕init.ts中的initState进行剖析，初始化生命周期之后紧接着。 initState initState的方法位于scr/core/instance/state.ts中； constsharedPropertyDefinition={ enumerable:true, configurable:true, get:noop, set:noop } exportfunctionproxy(target:Object,sourceKey:string,key:string)...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们详细的了解下具体的内容; 内容 这一块主要围绕init.ts中的vm.$mount进行剖析。 vm.$mount vm.$mount是全局的公共方法方法，但是这是我们要找的话就要向上查找了，代码位于scr/platforms/web/runtime/index.ts中； //publicmountmethod Vue.prototype.$mount=function( el?:string|Element, hydrating?:boolean ):Component{ //浏览器环境下如果存在el，则调用query方法进...

前言 前面我们简单的了解了vue初始化时的一些大概的流程，这里我们扩展下Vue的patch。 内容 这一块主要围绕vue中的__patch__进行剖析。 __patch__ Vue.prototype.__patch__的方法位于scr/platforms/web/runtime/index.ts中； //installplatformpatchfunction //判断是否是浏览器环境，是就赋予patch否则就赋予空函数 Vue.prototype.__patch__=inBrowser?patch:noop patch.ts patch.ts位于src/platforms/web/...