Vue.js 3.0 核心源码解析

Vue.js 3.0 核心源码解析

'01 组件渲染：vnode 到真实 DOM 是如何转变的？mp4'

·在Vue.js中，组件是一个非常重要的概念，整个应用的页面都是通过组件渲染来实现的但是你知道当我们编写这些组件的时候，它的内部是如何工作的吗？·从我们编写组件开始，到最终真实的DOM又是怎样的一个转变过程呢?·这节课，我们将会学习Vue.js3.0中的组件是如何渲染的

一个组件想要真正的渲染生成DOM的几个步骤：创建vnode渲染vnode生成DOM

应用程序初始化使用ensureRenderer().createApp()来创建app对象：

应用程序初始化·在整个app对象创建过程中，Vue.js利用闭包和函数柯里化的技巧，很好地实现了参数保留·比如，在执行app.mount的时候，不需要传入渲染器render因为在执行createAppAPI的时候渲染器render参数已经被保留下来了

因为Vue.js不仅仅是为Web平台服务，它的目标是支持跨平台渲染createApp函数内部的app.mount 方法是一个标准的可跨平台的组件渲染流程：

·重写的目的：既能让用户在使用API时可以更加灵活也兼容了Vue.js 2.x的写法比如 app.mount的第一个参数就同时支持选择器字符串和DOM对象两种类型

vnode本质上是用来描述DOM的JavaScript对象，它在Vue.js中可以描述不同类型的节点比如普通元素节点、组件节点等

核心渲染流程：创建 vnode和渲染 vnode拉勾引入vnode，可以把渲染过程抽象化抽象从而使得组件的抽象能力也得到提升因为 patch vnode的过程不同平台可以有自己的实现跨平台基于vnode再做服务端渲染、weex平台、小程序平台的渲染

核心渲染流程：创建vnode和渲染vnode·首先这种基于vnode实现的MVVM框架，在每次render to vnode 的过程中渲染组件会有一定的 JavaScript 耗时，特别是大组件·当我们去更新组件的时候，用户会感觉到明显的卡顿虽然diff算法在减少DOM操作方面足够优秀，但最终还是免不了操作DOM所以说性能并不是vnode的优势

核心渲染流程：创建 vnode和渲染 vnode渲染函数setupRenderEffec的实现：

初始渲染主要做两件事情：渲染组件生成subTree、把subTree挂载到container中

核心渲染流程：创建 vnode和渲染 vnode·如果是其他平台比如Weex,hostCreateElement方法就不再是操作DOM而是平台相关的API了，这些平台相关的方法是在创建渲染器阶段作为参数传入的·创建完DOM节点后，接下来要做的是判断如果有props的话给这个DOM节点添加相关的class、style、event等属性，并做相关的处理这些逻辑都是在hostPatchProp函数内部做的

因为insert的执行是在处理子节点后，所以挂载的顺序是先子节点，后父节点最终挂载到最外层的容器上

知识延伸：嵌套组件拉勾·在真实开发场景中，App和Hello组件的例子就是嵌套组件的场景组件vnode主要维护着组件的定义对象，组件上的各种props，而组件本身是一个抽象节点它自身的渲染其实是通过执行组件定义的render函数渲染生成的子树vnode来完成然后再patch通过这种递归的方式，无论组件的嵌套层级多深，都可以完成整个组件树的渲染

'02 组件更新：完整的 DOM diff 流程是怎样的？（上）mp4'

·梳理了组件渲染的过程，本质上就是把各种类型的vnode渲染成真实DOM·组件是由模板、组件描述对象和数据构成的，数据的变化会影响组件的变化组件的渲染过程中创建了一个带副作用的渲染函数当数据变化的时候就会执行这个渲染函数来触发组件的更新

副作用渲染函数更新组件的过程副作用渲染函数 setupRenderEffect的实现

updateComponent 函数·如果shouldUpdateComponent返回true,那么在它的最后先执行invalidateJob(instance.update)避免子组件由于自身数据变化导致的重复更新然后又执行了子组件的副作用渲染函数instance.update来主动触发子组件的更新

一个组件重新渲染可能会有两种场景：·一种是组件本身的数据变化，这种情况下next是 null·另一种是父组件在更新的过程中，遇到子组件节点，先判断子组件是否需要更新如果需要则主动执行子组件的重新渲染方法，这种情况下next 就是新的子组件vnode

·processComponent处理组件vnode,本质上就是去判断子组件是否需要更新·如果需要则递归执行子组件的副作用渲染函数来更新，否则仅仅更新一些vnode的属性并让子组件实例保留对组件vnode的引用，用于子组件自身数据变化引起组件重新渲染的时候在渲染函数内部可以拿到新的组件vnode

'03 组件更新：完整的 DOM diff 流程是怎样的？（下）mp4'

·新子节点数组相对于旧子节点数组的变化，无非是通过更新、删除、添加和移动节点来完成核心diff算法，就是在已知旧子节点的DOM结构、vnode和新子节点的vnode情况下以较低的成本完成子节点的更新为目的，求解生成新子节点DOM的系列操作

diff算法的第一步：从头部开始同步

从尾部开始同步尾部节点：

处理3种情况：·新子节点有剩余要添加的新节点·旧子节点有剩余要删除的多余节点·未知子序列

处理未知子序列·当两个节点类型相同时，执行更新操作当新子节点中没有旧子节点中的某些节点时，执行删除操作当新子节点中多了旧子节点中没有的节点时，执行添加操作·相对来说这些操作中最麻烦的就是移动，既要判断哪些节点需要移动也要清楚如何移动

在新旧子节点序列中找出相同节点并更新找出多余的节点删除，找出新的节点添加，找出是否有需要移动的节点，如果有该如何移动

移动子节点·对比新旧子序列，则需要遍历某个序列如果在遍历旧子序列的过程中需要判断某个节点是否在新子序列中存在，这就需要双重循环双重循环的复杂度是0(n2)，为了优化这个复杂度，建立索引图，把时间复杂度降低到O(n)

建立索引图·在开发过程中，会给v-for生成的列表中的每一项分配唯一key作为项的唯一ID这个key在diff过程中起到很关键的作用·对于新旧子序列中的节点，key相同的就是同一个节点，直接执行 patch更新即可

更新和移除旧节点拉勾教育互联网人实战大学·新旧子序列节点的更新、多余旧节点的删除·建立了一个newlndexToOldlndexMap存储新子序列节点的索引旧子序列节点的索引之间的映射关系，并确定是否有移动

最长递增子序列拉勾教育豆联间人实战大·求解最长递增子序列是一道经典的算法题，多数解法是使用动态规划的思想，算法的时间复杂度是O(n2)而Vue.js内部使用的是维基百科提供的一套“贪心+二分查找”的算法贪心算法的时间复杂度是O(n)，二分查找的时间复杂度是O(logn)，总时间复杂度是O(nlogn)

最长递增子序列·主要思路：对数组遍历，依次求解长度为i时的最长递增子序列当i元素大于i-1的元素时，添加i元素并更新最长子序列否则往前查找直到找到一个比i小的元素，然后插在该元素后面并更新对应的最长递增子序列

对于普通元素节点的更新，主要是更新一些属性，以及它的子节点子节点的更新又分为多种情况，其中最复杂的情况为数组到数组的更新内部又根据不同情况分成几个流程去diff，遇到需要移动的情况还要去求解子节点的最长递增子序列

整个更新过程还是利用了树的深度遍历，递归执行patch方法最终完成了整个组件树的更新

'04 Setup：组件渲染前的初始化过程是怎样的？mp4'

Vue.js 3.0允许在编写组件的时候添加一个setup启动函数Composition API逻辑组织的入口

setup 启动函数·在setup函数内部，定义了一个响应式对象state，通过reactive APl创建

state对象有count和double两个属性，其中count对应一个数字属性的值double通过computed APl创建，对应一个计算属性的值

模板中引用到的变量state和increment 包含在setup 函数的返回对象中

setup启动函数·在props、data、methods、computed等options中定义一些变量·在组件初始化阶段，Vue.js内部会处理这些options，即把定义的变量添加到了组件实例上等模板编译成render 函数的时候，内部通过with(this)}的语法去访问在组件实例中的变量

创建渲染上下文代理·Vue.js3.0，为了方便维护，把组件中不同状态的数据存储到不同的属性中比如存储到setupState、ctx、data、props中·在执行组件渲染函数的时候，直接访问渲染上下文instance.ctx中的属性，做一层proxy对渲染上下文instance.ctx属性的访问和修改代理到对setupState、ctx、data、props中的数据的访问和修改

·第一次获取key对应的数据后利用 accessCache[key]去缓存数据

下一次再次根据 key查找数据直接通过 accessCache[key]获取对应的值不需要依次调用hasOwn去判断

注意，如果我们直接对props中的数据赋值，在非生产环境中会收到一条警告因为直接修改 props不符合数据单向流动的设计思想

判断处理setup函数callWithErrorHandling函数的实现：

判断处理setup 函数拉勾教育互联网人实战大学·在handleSetupResult的最后，会执行finishComponentSetup 函数完成组件实例的设置·当组件没有定义的setup的时候，也会执行finishComponentSetup函数去完成组件实例的设置

标准化模板或者渲染函数·第一种是使用SFC(Single File Components)单文件的开发方式来开发组件通过编写组件的template模板去描述一个组件的DOM结构

另外一种开发方式是不借助webpack编译，直接引入Vue.js直接在组件对象template属性中编写组件的模板

标准化模板或者渲染函数runtime-onlyWeb端Vue.jsruntime-compiled

主要区别在于是否注册了这个compile方法

compile和组件template属性存在，render方法不存在的情况runtime-compiled 版本会在JavaScript运行时进行模板编译,生成render函数

compile 和render 方法不存在，组件template 属性存在的情况由于没有compile,用的是runtime-only的版本报一个警告来告诉用户，想要运行时编译得使用runtime-compiled 版本的Vue.js

组件既没有写render 函数，也没有写template模板此时要报一个警告，告诉用户组件缺少了 render函数或者 template模板

·处理完以上情况后，就要把组件的render函数赋值给instance.render组件渲染的时候，运行 instance.render 函数生成组件的子树 vnode·使用 with 块运行时编译的渲染函数，渲染上下文的代理是RuntimeCompiledPubliclnstanceProxyHandlers,在之前渲染上下文代理PubliclnstanceProxyHandlers的基础上进行的扩展

Options API:兼容Vue.js 2.x通过 applyOptions方法实现：

本课时主要分析了组件的初始化流程，主要包括创建组件实例和设置组件实例通过进一步细节的深入，了解了渲染上下文的代理过程了解了Composition API中的setup启动函数执行的时机

'05 响应式：响应式内部的实现原理是怎样的？（上）mp4'

Vue.js另一个核心设计思想就是响应式，本质是当数据变化后会自动执行某个函数映射到组件的实现就是，当数据变化后，会自动触发组件的重新渲染响应式是Vue.js组件化更新渲染的一个核心机制

render watcher依赖收集流程派发通知流程

解决Object.defineProperty API缺点Proxy APl重写了响应式部分，并独立维护及发布整个reactivity库

根本原因在created 中定义的this.msg并不是响应式对象

响应式对象的实现差异拉勾教育互联间人实战大学仅仅想在组件上下文中共享某个变量，而不必去监测它的变化在created 钩子函数中去定义这个变量

reactive 函数通过target.__v_raw属性来判断target是否已经一个响应式对象如果是的话则直接返回响应式对象

createReactiveObject 函数通过Proxy API劫持target对象,把它变成响应式

Reactive API·响应式的实现方式就是劫持数据,Vue.js3.0的reactive API就是通过Proxy劫持数据由于 Proxy劫持的是整个对象，所以检测到任何对对象的修改弥补了 Object.defineProperty API的不足

劫持对 observed 对象的一些操作，比如：·访问对象属性会触发get函数·设置对象属性会触发set函数·删除对象属性会触发deleteProperty函数·in操作符会触发has函数·Object.getOwnPropertyNames触发ownKeys函数

依赖收集：get函数依赖收集发生在数据访问的阶段

通过Reflect.get 方法求值

第三步：通过 Reflect.get 求值，然后会执行track 函数收集依赖

依赖收集：get函数·函数最后会对计算的值res 进行判断如果它也是数组或对象，则递归执行reactive把res变成响应式对象·因为Proxy劫持的是对象本身，并不能劫持子对象的变化

'06 响应式：响应式内部的实现原理是怎样的？（下）mp4'

·在Vue.js3.0中引入reactive API,把对象数据变成响应式着重分析 reactive API的实现原理，并学习了收集依赖的get函数分析reactive APl中需要关注的另一个内容——派发通知的过程

roctivoreaMmn服友理月：set 出数知发生在数据更新的阶段辰发通冰及理 用Proxy API劫持了娄这个响应式佘执行就今应式对象属性更新的时候据数据对持J多关就会执行set函数

trigger 函数就是根据target 和 key从 targetMap 中找到相关的所有副作用函数遍历执行一遍

副作用函数effect 副作用函数的实现 stack-edgecase-warpEffect

at

副作用函数·假设没有cleanup，在第一次渲染模板的时候，activeEffect是组件的副作用渲染函数因为模板render的时候访问了 state.msg，所以会执行依赖收集把副作用渲染函数作为state.msg的依赖，称作render effect

·点击Switch View按钮，视图切换为显示随机数，此时我们再点击Toggle Msg按钮由于修改了state.msg就会派发通知，找到了render effect并执行，就又触发了组件的重新渲染

·行为实际上并不符合预期，因为当我们点击Switch View按钮，视图切换为显示随机数的时候触发组件的重新渲染，但这个时候视图并没有渲染state.msg对它的改动并不应该影响组件的重新渲染

·因此在组件的 render effect 执行之前，如果通过cleanup 清理依赖删除之前 state.msg 收集的 render effect 依赖当我们修改state.msg时，由于已经没有依赖了就不会触发组件的重新渲染，符合预期

readonly APImutableHandlersreadonlyHandlers主要在get、set和deleteProperty 三个函数上

ref API·active APl对传入的target 类型有限制，必须是对象或者数组类型对于一些基础类型（比如String、Number、Boolean)是不支持的·但是有时候从需求上来说，把一个字符串变成响应式，却不得不封装成一个对象使用不方便，Vue.js3.0设计并实现了ref API

响应式API的实现原理，知道什么时候收集依赖，什么时候派发更新副作用函数的作用和设计原理reactive、readonly、ref三种API的区别和各自的使用场景

'07 计算属性：计算属性比普通函数好在哪里？mp4'

·计算属性是Vue.js开发中一个非常实用的API，它允许用户定义一个计算方法然后根据一些依赖的响应式数据计算出新值并返回·当依赖发生变化时，计算属性可以自动重新计算获取新值，使用方便

沿用并单独使用API

计算属性本质上还是对依赖的计算，为什么不直接用函数呢？在Vue.js 3.0中计算属性的API又是如何实现呢？

在getter函数中，根据响应式对象重新计算出新的值，叫做计算属性这个响应式对象，就是计算属性的依赖

计算属性 API:computed在getter函数中，根据响应式对象重新计算出新的值，叫做计算属性这个响应式对象，就是计算属性的依赖

计算属性的运行机制computed 函数valuedirty

从广义上看，脏数据是指没有进行过数据预处理而直接接收到的、处于原始状态的数据；从狭义上看，是不符合研究要求，以及不能够对其直接进行相应的数据分析。

脏数据依据不同的分析目的有不同的定义，如在常见的数据挖掘工作中，脏数据是指不完整、含噪声、不一致的数据；而在问卷分析中，脏数据则是指不符合问卷要求的数据。

p//r

计算属性的运行机制配置 scheduler 函数：

调度程序

computed 计算属性有两个特点：·延时计算，只有当我们访问计算属性的时候，真正运行computed getter函数计算·缓存，它的内部会缓存上次的计算结果value，而且只有dirty为true 时才会重新计算如果访问计算属性时dirty为false，那么直接返回这个value

计算属性的优势：只要依赖不变化，就可以使用缓存的value而不用每次在渲染组件的时候都执行函数去计算

理解计算属性的工作机制，能搞明白计算属性嵌套场景代码的执行顺序知道计算属性的两个特点——延时计算和缓存，在组件的开发中合理使用计算属性

computed函数返回的对象实际上劫持的是value 属性的getter和setter，但为什么我们在组件的模板中访问一个计算属性变量，不用手动在后面加.value 呢？

'08 侦听器：侦听器的实现原理和使用场景是什么？（上）mp4'

watch API的用法
侦听一个getter函数
侦听一个响应式对象
侦听多个响应式对象watch API实现原理侦听器，当侦听的对象或者函数发生了变化则自动执行某个回调函数与副作用函数effect很像，那它的内部实现是不是依赖了effect 呢?/∥标准化source∥构造applyCb回调函数∥创建scheduler时序执行函数∥创建effect副作用函数∥返回侦听器销毁函数
标准化source拉source标准化根据source的类型分类：如果source是ref对象，则创建一个访问source.value的getter函数如果source是reactive对象，则创建一个访问source的getter函数，并设置deep为truesource标准化根据source的类型分类：如果source是一个函数，则会进一步判断第二个参数cb是否存在，对于watch APl来说cb是一定存在且是一个回调函数，getter就是一个简单的对 source函数封装的函数source标准化根据source的类型分类：如果source不满足上述条件，则在非生产环境下报警告，提示source类型不合法根本原因是，当我们再去修改 state.count.a.b的时，会通知effect所以最终会执行 watcher的回调函数·当侦听一个通过reactive APl创建的响应式对象时，内部执行traverse 函数如果这个对象非常复杂，如嵌套层级很深，递归traverse就会有一定的性能耗时·如果侦听这个复杂响应式对象内部的某个具体属性，想办法减少traverse带来的性能损耗构造回调函数cb的三个参数：oldValuenewValueonlnvalidateOptions中的flush决定了 watcher的执行时机·当flush为sync的时，表示它是一个同步watcher,即当数据变化时同步执行回调函数·当flush为pre的时，回调函数通过queueJob的方式在组件更新之前执行如果组件还没挂载，则同步执行确保回调函数在组件挂载之前执行·如果没设置flush，回调函数通过queuePostRenderEffect的方式在组件更新之后执行侦听器的内部设计，侦听响应式数据的变化，内部创建 effect runner首次执行runner做依赖收集，然后在数据发生变化后，以某种调度方式去执行回调函数

it-sci-it

isi

think

'09 侦听器：侦听器的实现原理和使用场景是什么？（下）mp4'

回调函数是以一种调度的方式执行的当flush不是sync时，把回调函数执行的任务推到一个异步队列中执行

异步任务队列的设计

·只输出了一次count的值，最终计算的值3在大多数场景下都是符合预期的·在一个Tick（宏任务执行的生命周期）即使多次修改侦听的值它的回调函数也只执行一次

异步任务队列的创建·在创建一个watcher时如果配置flush为pre或不配置flush，那么watcher的回调函数就会异步执行分别是通过queueJob和queuePostRenderEffect 把回调函数推入异步队列中

异步任务队列的创建sFlushPending的控制,即使多次执行queueFlush,也不会多次去执行flushJobsnextTick在Vue.js 3.0中的实现，通过Promise.resolve().then去异步执行flushJobs

异步任务队列的创建·JavaScript是单线程执行的，异步设计在一个Tick内可以多次执行queueJob 或者queuePostFlushCb去添加任务可以保证在宏任务执行完毕后的微任务阶段执行一次flushJobs

异步任务队列queue从小到大的排序创建组件的过程是由父到子，创建组件副作用渲染函数先父后子父组件的副作用渲染函数的effect id是小于子组件每次更新组件也是通过queueJob把effect推入异步任务队列queue中

注意checkRecursiveUpdates的逻辑用来在非生产环境下检测是否有循环更新的

异步任务队列的执行・遍历完postFlushCbs后,会重置isFlushing为false因为一些postFlushCb执行过程中可能会再次添加异步任务需要继续判断如果queue或者postFlushCbs队列中还存在任务，递归执行flushJobs

优化：只用一个变量isFlushPending 和 isFlushing为什么需要两个变量来控制呢？

优化：只用一个变量isFlushPending用于判断是否在等待nextTick 执行flushJobsisFlushing是判断是否正在执行任务队列

isFlushPending 和 isFlushing·在一个Tick内可以多次添加任务到队列中，但是任务队列会在nextTick后执行·在执行任务队列的过程中，也可以添加新的任务到队列中，在当前Tick去执行剩余的任务队列

watchEffect APIwatchEffect API的作用是注册一个副作用函数副作用函数内部可以访问到响应式对象，当内部响应式对象变化后再立即执行这个函数

watchEffect和watch API不同点：·侦听的源不同，watch APl侦听一个或多个响应式对象，侦听一个getter函数watchEffect APl侦听的是一个普通函数，内部访问了响应式对象，不需要返回响应式对象

watchEffect和watch API不同点：·立即执行，watchEffect APl在创建好watcher后，立刻执行它的副作用函娄watch API需要配置 immediate为true,才会立即执行回调函数

doWatch 函数的简化版实现：

注册无效回调函数通过 onlnvalidate参数注册一个无效函数

掌握了侦听器内部实现原理，了解侦听器支持的几种配置参数的作用，以及异步任务队列的设计原理掌握侦听器的常见应用场景：如何用watch APl观测数据的变化去执行一些逻辑如何利用watchEffect API去注册一些副作用函数，如何去注册无效回调函数以及如何停止一个正在运行的watcher

侦听器更适合用于在数据变化后执行某段逻辑的场景计算属性用于一个数据依赖另外一些数据计算而来的场景

在组件中创建的自定义watcher，在组件销毁的时候会被销毁吗，是如何做的呢?

'10 生命周期：各个生命周期的执行时机和应用场景是怎样的？mp4'

beforeCreate->使用setup(
created ->使用 usesetup
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy-> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

Vue.js3.0新增调试生命周期APIonRenderTriggeredonRenderTracked

createHook 钩子函数的实现原理：

layout mod

唯一的区别是第一个参数字符串不同createHook 封装，一个典型的函数柯里化技巧

注册钩子函数拉勾教育生命周期的钩子函数，是在组件生命周期的各个阶段执行钩子函数必须要保存在当前的组件实例上，通过不同的字符串key找到对应的钩子函数数组并执行

onBeforeMount 注册的 beforeMount 钩子函数会在组件挂载之前执行onMounted注册的 mounted钩子函数会在组件挂载之后执行

组件副作用渲染函数关于组件挂载部分的实现：

onBeforeMount 和 onMounted·都可以，因为created和mounted 钩子函数执行的时候都能拿到组件数据执行的顺序虽然有先后，但都会在一个Tick内执行完毕异步请求是有网络耗时的，其耗时远远大于一个Tick的时间

onBeforeUnmount 和 onUnmounted·在组件销毁前，检测组件实例上是有否有注册的 beforeUnmount 钩子函数 bum如果有则通过 invokeArrayFns 执行·在组件销毁后，检测组件实例上是否有注册的unmounted 钩子函数 um如果有则通过queuePostRenderEffect 把unmounted 钩子函数推入到postFlushCbs中

·对于嵌套组件，组件在执行销毁相关的生命周期钩子函数时先执行父组件的 beforeUnmount，再执行子组件的 beforelnmount然后执行子组件的 unmounted，最后执行父组件的 unmounted

onErrorCapturedhandleError 实现：

onErrorCaptured拉勾教育errorCaptured 本质上是捕获一个来自子孙组件的错误，返回true阻止错误继续向上传播

在执行完依赖收集后，执行onTrack函数遍历执行注册的 renderTracked 钩子函数

'11 依赖注入：子孙组件如何共享数据？mp4'

祖先组件不需要知道哪些后代组件在使用它提供的数据后代组件也不需要知道注入的数据来自哪里

关系图：providesprovidesprovides创建→一创建→子组件根组件APP

if instance in provides[key] proto

对比模块化共享数据的方式作用域不同对于依赖注入，它的作用域是局部范围，把数据注入以这个节点为根的后代组件中对于模块化的方式，它的作用域是全局范围的，在任何地方引用它导出的数据

数据来源不同对于依赖注入，后代组件是不需要知道注入的数据来自哪里，注入并使用对于模块化的方式提供的数据，用户必须知道这个数据是在哪个模块定义的，引入它

上下文不同对于依赖注入，根据不同的组件上下文提供不同的数据给后代组件对于模块化提供的数据，从API层面设计做更改

依赖注入的缺陷和应用场景祖先组件不需要知道哪些后代组件在使用它提供的数据后代组件也不需要知道注入的数据来自哪里不推荐在普通应用程序代码中使用依赖注入

依赖注入的缺陷和应用场景this.Sparent是一种强耦合的获取父组件实例方式，不利于代码的重构因为一旦组件层级发生变化，就会产生非预期的后果，在平时的开发工作中慎用

依赖注入，提供组件实例数据，提供任意类型的数据因为入口组件和它的相关子组件关联性是很强

Vue.js 2.x，在data 中定义的变量，在组件实例化阶段变成响应式
Vue.js 3.0 Composition API,用利用reactive或者ref API主动去申明一个响应式对象

通过Composition API去编写组件，用户更清楚自己在做什么事情

'12 模板解析：构造 AST 的完整流程是怎样的？（上）mp4'

web编译的入口 compile 函数

baseCompile的实现： //解析template生成AST

/∥ AST转换

插值的解析parselnterpolation 函数的实现

parselnterpolation最终返回的值就是一个描述插值节点的对象type表示一个插值节点，loc表示插值的代码开头和结束的位置信息，content是表达式节点的对象

content 是一个描述表达式节点的对象type表示它是一个表达式节点，loc表示内容的代码开头和结束的位置信息，content表示插值的内容

普通文本的解析parseText的实现：

'13 模板解析：构造 AST 的完整流程是怎样的？（下）mp4'

解析 template生成AST 背后的实现原理

创建解析上下文解析子节点创建 AST 根节点

元素节点的解析parseElement的实现：

∥是否在pre标签内const waslnPre = context.inPre∥是否在v-pre指令内const waslnVPre = context.inVPre∥/获取当前元素的父标签节点const parent = last(ancestors)∥解析开始标签，生成一个标签节点，并前进代码到开始标签后const element = parseTag(context, 0 /* Start */, parent)∥是否在pre标签的边界const isPreBoundary = context.inPre && !waslnPre∥/是否在v-pre指令的边界

元素节点的解析parseTag方法解析并创建一个标签节点

HTML的嵌套结构的解析过程一个递归解析元素节点的过程

ancestors 的设计就是一个栈的数据结构整个过程是一个不断入栈和出栈的过程

空白字符管理空白字符管理相关逻辑代码：

总结掌握Vue.js编译过程的第一步,即把template解析生成AST对象整个解析过程是一个自顶向下的分析过程，从代码开始，通过语法分析找到对应的解析处理逻辑，创建AST节点，处理的过程中也在不断前进代码更新解析上下文，最终根据生成的AST节点数组创建AST根节点

在parseTag的过程中，如果解析的属性有v-pre标签为什么要回到之前的context，重新解析一次?

'14 AST 转换：AST 节点内部做了哪些转换？（上）mp4'

AST转换示例通过getBaseTransformPreset 方法获取节点和指令转换的方法

注意，只分析在Node.js环境下的编译过程Web环境的编译结果可能会有一些差别

Vue.js八种转换函数处理指令、表达式、元素节点、文本节点等

Element 节点转换函数Element 节点转换函数的实现：const transformElement = (node, context) =>{

Element节点转换函数createVNodeCall的实现

转换后生成的node.codegenNode：

表达式节点转换函数注意：只有在 Node.js 环境下的编译或者是Web 端的非生产环境下执行transformExpression

transformExpression转换插值和元素指令中的动态表达式内部主要是通过processExpression 函数完成

Vue.js无在模板中手动加组件实例的前缀

表达式节点转换函数processExpression的详细实现因为内部依赖了 @babel/parser 库去解析表达式生成 AST 节点并依赖了 estree-walker库去遍历这个AST 节点，然后对节点分析去判断是否需要加前缀接着对AST节点修改，最终转换生成新的表达式对象

表达式节点转换函数·@babel/parser这个库通常是在Node.js端用的，本身体积非常大·如果打包进Vue.js的话会让包体积膨胀4倍，不会在生产环境的Web端引入这个库Web 端生产环境下的运行时编译最终会用 with 的方式

只有在Node.js环境下的编译或者是Web 端的非生产环境下执行transformExpression

'15 AST 转换：AST 节点内部做了哪些转换？（下）mp4'

创建 transform 上下文遍历AST 节点静态提升创建根代码生成节点

遍历AST 节点Text节点转换函数的实现：const transformText = (node, context) =>{

文本节点：slot

createCallExpression 的实现：function createCallExpression(callee, args =[], loc =

遍历 AST 节点·创建的函数表达式所生成的节点，对应的函数名是createTextVNode・参数callArgs是子节点本身child如果是动态插值节点，那么参数还会多一个TEXT的patchFlag

v-if节点转换函数v-if节点转换函数的实现：const transformlf =

v-if节点转换函数createStructuralDirectiveTransformfunction createStructuralDirectiveTransform(name, fn){

v-if节点转换函数createlfBranch 去创建一个分支节点：function createlfBranch(node, dir) {

如果节点 node 不是 template那么children指向的就是这个单个node构造的数组

v-if节点转换函数·创建IF节点替换当前节点，IF节点拥有 branches 属性，以及分支节点·相对于原节点，IF节点的语义化更强，更利于后续生成条件表达式代码

通过 createConditionalExpression 返回一个条件表达式节点：function createConditionalExpression(test, consequent,

执行 hoistStatic 做静态提升：

注意：如果getStaticType返回的staticType的值是2,表明它是一个运行时常量由于它的值在运行时才能被确定，所以是不能静态提升的

createRootCodegen 的实现：function createRootCodegen(root, context) {

总结·如果说 parse阶段是一个词法分析过程，构造基础的AST节点对象那么transform节点就是语法分析阶段，把AST节点做一层转换，构造出语义化更强信息更加丰富的codegenCode，它在后续的代码生成阶段起着非常重要的作用

思考题静态提升的好处，针对静态节点不用每次在 render 阶段都执行一次createVNode创建vnode对象，但它有没有成本呢？为什么？

'16 生成代码：AST 如何生成可运行的代码？（上）mp4'

分析了AST节点转换的过程AST节点转换的作用是通过语法分析

mode module
prefixldentifiers
编译配置
hoistStatic
...

generate 函数的实现：

创建代码生成上下文push(code)context.code后追加code来更新它的值

indent()增加代码的缩进，让上下文维护的代码缩进context.indentLevel 加1内部会执行 newline方法，添加一个换行符，以及两倍indentLevel对应的空格

deindent()减少代码的缩进，让上下文维护的代码缩进context.indentLevel 减1在内部会执行newline方法去添加一个换行符，并减少两倍indentLevel对应的空格

生成预设代码代码实现：function genModulePreamble(ast, context, genScopeld) {

helperNameMap的定义如下：

创建VNode 的方法比如ScreateElement、_c挂载在组件的实例上在生成渲染函数的时候，直接从组件实例vm中访问这些方法Vue.js 2.x

创建 VNode 的方法 createVNode 直接通过模块的方式导出首先需要生成 import 声明的预设代码Vue.js 3.0

生成资源声明代码生成资源声明代码：∥生成自定义组件声明代码if(act comnonentc lenoth)(

newline genassets

把变量通过 toValidAssetld 进行一层包装：function toValidAssetld(name, type) {

'17 生成代码：AST 如何生成可运行的代码？（下）mp4'

generate 主要做五件事情：创建代码生成上下文，生成预设代码，生成渲染函数生成资源声明代码，生成创建VNode树的表达式

生成创建VNode树的表达式创建VNode 树的实现：

生成创建VNode树的表达式通过genNode 生成创建VNode 树的表达式

生成创建 VNode 树的表达式执行 genVNodeCall生成创建VNode 节点的表达式代码

生成如下打开Block的代码：

isBlock
true生成创建Block相关代码
false生成创建VNode的相关代码

genNullableArgs 的实现：

生成类似下面的代码：_createBlock(tag, props, children)

生成创建VNode树的表达式通过genNodeList来生成参数相关的代码function genNodeList(nodes, context, multilines =

nodes 第二个元素function genExpression(node, context) {

通过创建一个Block来创建对应的 vnode

运行时优化Block主要就是收集动态的vnode的节点在patch 阶段只比对这些动态vnode 节点

总结拉了解了AST是如何生成可运行的代码Vue.js 3.0是如何通过Block的方式实现了运行时组件更新的性能优化

Block数组是一维的，但是动态的子节点可能有嵌套关系patchBlockChildren 内部也是递归执行了patch函数那么在整个更新的过程中，出现子节点重复更新的情况吗，为什么？

'18 Prop：Prop 的初始化和更新流程是怎样的？mp4'

Props特性允许组件的使用者在外部传递，实现各种各样的功能

Vue.js内部是如何初始化以及更新Props的呢？Vue.js 3.0在props的API设计上和Vue.js 2.x保持一致那它们的底层实现层面有没有不一样的地方呢?

function setupComponent (instance, isSSR = false) {

Props初始化的实现function initProps(instance, rawProps, isStateful, isSSR =

normalizePropsOptions 函数的实现：function normalizePropsOptions(comp) {

最终标准化的 props的定义是这样的：

设置Props把数组或者函数形式的prop标准化成对象形式，例如：

设置PropsnormalizePropsOptions 函数的实现：

遍历props数据求值的流程function setFullProps(instance, rawProps, props, attrs) {

validateProps 的实现：function validateProps(props, comp){

响应式处理把props变成响应式添加到实例instance.props上

为什么 instance.props要变成响应式为什么用shallowReactive API呢?

Props的更新执行updateComponent方法：

Props的更新执行componentEffect组件副作用渲染函数：

Props的更新updateComponentPreRender的实现：

Props的更新updateProps 的实现：function updateProps(instance, rawProps, rawPrevProps, optimized) {

Props的更新updateProps的实现：

总结了解Props是如何被初始化的，如何被校验的，区分开Props配置和Props传值了解Props是如何更新的以及实例上的props为什么要定义成响应式的

当我们点击Add age按钮去修改this.info.age的时候触发了子组件props的变化了吗?子组件为什么会重新渲染呢?

'19 插槽：如何实现内容分发？mp4'

Vue.js 受到Web Component草案的启发通过插槽的方式实现内容分发

注意：父组件在插槽中引入的数据它的作用域是父组件的

插槽的实现在父组件渲染阶段，子组件插槽部分的DOM是不能渲染需要通过某种方式保留下来，等到子组件渲染的时候再渲染

shapeFlag:SLOTS_CHILDREN | STATEFUL_COMPONENT

插槽的实现withCtx函数的实现：function withCtx(fn, ctx = currentRenderinglnstance){

保证在子组件中渲染具体插槽内容保证它的数据作用域也是父组件

插槽的实现Fragement的实现：

插槽的实现实际上就是一种延时渲染，把父组件中编写的插槽内容保存到一个对象上并且把具体渲染DOM的代码用函数的方式封装，然后在子组件渲染的时候根据插槽名在对象中找到对应的函数，然后执行这些函数做真正的渲染

'20 指令：指令完整的生命周期是怎样的？mp4'

Vue.js的核心思想之一是数据驱动手动操作某个元素节点的DOM

全局注册一个v-focus指令：

在组件内部局部注册：

指令的定义本质上就是一个JavaScript对象，对象上挂着一些钩子函数

指令的注册定义注册

注册把指令的定义保存到相应的地方，未来使用的时候我可以从保存的地方拿到它

指令的注册和组件一样，可以全局注册，也可以局部注册

指令的注册directive 方法的实现：

指令的应用不使用v-focus,单个input编译生成后的render函数

resolveDirective 函数

注意：在resolve函数实现的过程中，它会先根据name 匹配如果失败则把name变成驼峰格式继续匹配，还匹配不到则把name首字母大写后继续匹配

在元素的生命周期中知道运行哪些指令相关的钩子函数在运行这些钩子函数的时候还可以往钩子函数中传递一些指令相关的参数

invokeDirectiveHook方法

mounted 钩子函数用queuePostRenderEffect 包一层执行

patchElement 函数

unmount 函数

了解指令是如何定义、如何注册，以及如何应用的指令提供了在一个元素的生命周期中注入代码的途径

Vue.js里有内置的双向绑定的实现吗？有的，v-model指令就是一种双向绑定的实现在平时项目开发中，也经常会使用 v-model

v-model 特定的表单标签自定义组件extareaselectinput

在普通表单元素上作用v-mo编译后生成render函数：

lazy 修饰符·如果配置了lazy修饰符，那么监听的是input 的change 事件·如果不配置lazy,监听的是input的input事件多监听compositionstart和compositionend 事件

v-model实际上就是一种打通数据双向通讯的语法糖，即外部可以往组件上传递数据组件内部经过某些操作行为修改了数据，然后把更改后的数据再回传到外部

v-model的方式Element UI

v-model的方式必须在组件中申明一个modelValue的prop

了解v-model在普通表单元素上以及在自定义指令上的实现原理了解自定义事件派发的实现原理

'21 v-model：双向绑定到底是怎么实现的？mp4'

front one

'22 Teleport 组件：如何脱离当前组件渲染子组件？mp4'

组件模板的一部分在逻辑上属于该组件从技术角度来看，最好将模板的这一部分移动到应用程序之外的其他位置

提供了一个内置组件Teleport

Teleport 组件创建process 方法关于 Teleport 组件创建部分的逻辑：

了解Teleport是如何把内部的子元素渲染到目标元素上Teleport 组件是如何创建，更新和移除

current target

'23 KeepAlive 组件：如何让组件在内存中缓存和调度？mp4'

用模板导出工具查看编译后的render函数：

KeepAlive 组件的定义：

缓存的设计组件的递归patch过程，主要就是为了渲染DOM

KeepAlive组件onBeforeMountonBeforeUpdate

执行了 cacheSubtree 函数来做缓存：

支持的三个Props include exclude max

当缓存新的 vnode的时候，做一定程度的缓存管理

∥/删除最久不用的key，符合LRU思想

在卸载的过程中执行onBeforeUnmount 钩子函数

KeepAlive实际上是一个抽象节点，渲染的是它的第一个子节点了解它的缓存设计、Props设计和卸载过程

如何给组件注册 activated和deactivated钩子函数的它们的执行和其他钩子函数比，有什么不同

'24 Tranition 组件：过渡动画的实现原理是怎样的？（上）mp4'

如果我们使用 Vue.js技术栈，有没有好的实现动画的方式呢?有，Vue.js 提供了内置的 Transition 组件

Transition组件的用法CSS过渡CSS动画JavaScript钩子

Transition 组件的核心思想Transition组件过渡动画的触发条件：条件渲染（使用v-if)条件展示（使用v-show)动态组件组件根节点

Transition组件的核心思想当Transition 包裹的元素插入删除时，在适当的时机插入这些CSS样式

Transition组件抽象组件KeepAlive 组件

transition包含keepalive

判断是否是一次更新渲染Transition组件resolveTransitionHookssetTransitionHooks 函数__Transition 渲染的是组件嵌套的第一个子元素节点

'25 Tranition 组件：过渡动画的实现原理是怎样的？（下）mp4'

Transition 组件组件的渲染、钩子函数的执行、模式的应用钩子函数的执行

钩子函数的执行beforeEnter 钩子函数

钩子函数的执行Transitioan组件的定义

钩子函数的执行执行 beforeEnter钩子函数，以及给元素添加相应的CSS样式

钩子函数的执行makeEnterHook(false)函数执行后的返回值

当我们添加了 enterToClass后这个时候浏览器就开始根据我们编写的CSS进入过渡动画了那么动画何时结束呢

区别在in-out模式下，新元素先进行过渡，完成之后当前元素过渡离开在out-in模式下，当前元素先进行过渡，完成之后新元素过渡进入

模式的应用show 变量由true 变成false触发当前元素hello文本的离开动画也会同时触发新元素hi文本的进入动画由于动画是同时进行的就把新元素hi文本挤到下面去了

Transition 组件是如何渲染的如何执行过渡动画和相应的钩子函数的当两个视图切换时，模式的工作原理是怎样的

Transition组件在beforeEnter钩子函数里会判断el._leaveCb是否存在,存在则执行在leave 钩子函数里会判断 el._enterCb是否存在，存在则执行这么做的原因是什么？

'26 Vue Router：如何实现一个前端路由？（上）mp4'

前端路由源于服务端URL与处理函数之间的映射关系

Web 前端单页应用SPAURL与视图之间的映射关系URL变化会引起视图的更新

前端路由的好处无须刷新页面减轻了服务器的压力提升了用户体验Vue Router的实现原理

runtimecompiler:true

路由的实现原理路由的基础结构就是一个路径对应一种视图当我们切换路径的时候对应的视图也会切换对路径的管理

路由的实现原理navigate方法

'27 Vue Router：如何实现一个前端路由？（下）mp4'

Vue Router的基本用法，并且开始探究它的实现原理

路径和路由组件的渲染的映射拉勾教育互联网人实战大RouterView的渲染的路由组件和当前路径currentRoute 的matched 对象相关和RouterView 自身的嵌套层级相关

路径和路由组件的渲染的映射什么情况下会有parent matcher 呢?在创建了matcher对象后，接着判断record 中是否有children属性如果有则遍历children，递归执行 addRoute 方法添加路径并把创建 matcher作为第二个参数parent传入

导航守卫的实现guardToPromiseFn 函数的实现：

经过Promise 化后添加到guards数组中通过 runGuards 以及Promise 的方式链式调用依次顺序执行这些导航守卫

了解Vue Router的基本实现原理，知道路径是如何管理的路径和路由组件的渲染是如何映射的，导航守卫是如何执行的

'zfdev_treetxt'

'导读 一文看懂 Vue.j 3.0 的优化mp4'

源码自身的维护性数据量大后带来的渲染和更新的性能问题兼容性想舍弃但为了兼容一直保留的鸡肋APl

更好的编程体验更好的 TypeScript 支持更好的逻辑复用实践

源码优化·首先是源码优化，也就是小右对于Vue.js框架本身开发的优化它的目的是让代码更易于开发和维护·源码的优化主要体现在使用monorepo和TypeScript 管理和开发源码这样做的目标是提升自身代码可维护性

new old

更好的代码管理方式：monorepo·相对于Vue.js 2.x的源码组织方式，monorepo把这些模块拆分到不同的package中每个 package 有各自的APl、类型定义和测试这样使得模块拆分更细化，职责划分更明确，模块之间的依赖关系也更加明确开发人员也更容易阅读、理解和更改所有模块源码，提高代码的可维护性

更好的代码管理方式：monorepo拉勾教育·package（比如reactivity响应式库）是可以独立于Vue.js使用的这样用户如果只想使用Vue.js3.0的响应式能力，可单独依赖这个响应式库而不用去依赖整个Vue.js减小了引用包的体积大小，而Vue.js 2.x是做不到这一点的

无类型语言JavaScript

·因为它可以在编码期间帮你做类型检查避免一些因类型问题导致的错误·有利于它去定义接口的类型，利于IDE对变量类型的推导

Flow

有类型的JavaScript:TypeScriptFlow·Flow是Facebook出品的JavaScript静态类型检查工具，它可以以非常小的成本对已有的JavaScript代码迁入,非常灵活,这也是Vue.js 2.0当初选型它时一方面的考量·Flow对于一些复杂场景类型的检查，支持得并不好记得在看Vue.js2.x源码的时候，在某行代码的注释中看到了对Flow的吐槽

性能优化对于Vue.js 2.x已经足够优秀的前端框架它的性能优化可以从哪些方面进行突破呢?

Vue.js 3.0在源码体积的减少方面做了哪些工作呢？移除一些冷门的 feature引入tree-shaking的技术

源码体积优化引入tree-shaking的技术依赖ES2015模块语法的静态结构（即import和export）通过编译阶段的静态分析，找到没有引入的模块并打上标记

引入tree-shaking的技术如果你在项目中没有引入Transition、KeepAlive等组件，那么它们对应的代码就不会打包这样也就间接达到了减少项目引入的Vue.js包体积的目的

数据劫持优化Vue.js 1.xVue.js 2.xVue.js 3.0数据是响应式G沙快退00:06:40

数据劫持优化拉勾教育互联网人实战大学实现DOM功能，必须劫持数据的访问和更新当数据改变后，为了自动更新DOM，那么就必须劫持数据的更新也就是说当数据发生改变后能自动执行一些代码去更新DOMVue.js

Vue.js怎么知道更新哪一片DOM呢？因为在渲染DOM的时候访问了数据，我们可以对它进行访问劫持这样就在内部建立了依赖关系，也就知道数据对应的DOM是什么了

实现DOM功能，必须劫持数据的访问和更新当数据改变后，为了自动更新DOM，那么就必须劫持数据的更新也就是说当数据发生改变后能自动执行一些代码去更新DOM

Vue.js怎么知道更新哪一片DOM呢？因为在渲染DOM的时候访问了数据，我们可以对它进行访问劫持这样就在内部建立了依赖关系，也就知道数据对应的DOM是什么了

数据劫持优化通过Object.defineProperty这个API劫持数据的getter和 setter,具体是这样的：

Object.defineProperty(data, 'a',{get(){//track1，set(){//trigger1了

fpmc

注意的是，Proxy APl并不能监听到内部深层次的对象变化因此Vue.js 3.0的处理方式是在getter 中去递归响应式

这样的好处是真正访问到的内部对象才会变成响应式，而不是无脑递归这样无疑也在很大程度上提升了性能

new vue--init--$mount--compile--render--vnode--path--dom

除了数据劫持部分的优化我们可以在耗时相对较多的patch阶段想办法

Vue.js 2.x的数据更新并触发重新渲染的粒度是组件级的：watcher依赖收集

通过编译阶段对静态模板的分析，编译生成了 Block tree

编译优化拉勾教育Block tree·Block tree是一个将模版基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的每个区块只需要以一个Array来追踪自身包含的动态节点·借助Block tree，Vue.js将vnode 更新性能由与模版整体大小相关提升为与动态内容的数量相关

在编译阶段还包含了对Slot的编译优化、事件侦听函数的缓存优化并且在运行时重写了diff算法

除了源码和性能方面，Vue.js3.0还在语法方面进行了优化主要是提供了 Composition API

编写组件本质就是在编写一个“包含了描述组件选项的对象”我们把它称为Options API

优化逻辑组织拉Options API·Options API的设计是按照methods、computed、data、props这些不同的选项分类·当组件小的时候，这种分类方式一目了然；但是在大型组件中，一个组件可能有多个逻辑关注点当使用Options APl的时候，每一个关注点都有自己的Options如果需要修改一个逻辑点关注点，就需要在单个文件中不断上下切换和寻找

优化逻辑组织0102处理文件夹导航跟踪当前文件夹状态并显示其内容（比如打开、关闭、刷新等）0304切换显示收藏夹处理新文件夹的创建0 506处理当前工作目录的更改切换显示隐藏文件夹

提供了一种新的API:Composition API就是将某个逻辑关注点相关的代码全都放在一个函数里这样当需要修改一个功能时，就不再需要在文件中跳来跳去

类似mixins 冲突

优化逻辑复用·首先每个mixin都可以定义自己的props、data，它们之间是无感的所以很容易定义相同的变量，导致命名冲突

·对组件而言，如果模板中使用不在当前组件中定义的变量，那么就会不太容易知道这些变量在哪里定义的，这就是数据来源不清晰但是Vue.js 3.0设计的Composition API,就很好地帮助我们解决了mixins的这两个问题

优化逻辑复用约定 useMousePosition这个函数为hook函数，然后在组件中使用：

优化逻辑复用Composition API·除了在逻辑复用方面有优势，也会有更好的类型支持·因为它们都是一些函数，在调用函数时，自然所有的类型就被推导出来了不像Options API所有的东西使用this·另外，Composition APl对tree-shaking友好，代码也更容易压缩

引入RFC：使每个版本改动可控Vue.js 2.xRFC (Request For Comments)

旨在为新功能进入框架提供一个一致且受控的路径

大规模启用RFC(Request For Comments)了解每一个feature采用或被废弃掉的前因后果

Vue.js的用户还不多，生态也不完善很多用户都是直接上手的2.0版本，没有旧项目的历史包袱

通常major 版本的升级会有很多 breaking change这就意味着想从2.x升级到3.0的项目需要改代码而且不仅仅项目的代码要修改，所依赖的周边生态也需要升级

过渡期

使用ES2015的语法开发，有些API如Proxy是没有polyfill的这就意味着官方需要单独出一个IE11 compat 版本来支持IE11

关注它的发展学习它的设计思想为它的生态建设贡献代码

总结本课时主要讲解了Vue.js 3.0升级做了几个方面的优化，以及为什么会需要这些优化希望学习完后我们也可以像小右一样去审视自己的工作有哪些痛点，找到可以改进和努力的方向并实施

'开篇词 解析 Vue.j 源码，提升编码能力mp4'

新技术、新框架，关注前端自动化、工程化、前端架构

为什么你要学习Vue.js源码？前端技术日新月异的今天，前端应用的复杂度也在日益提升熟练掌握一门MVVM前端开发框架已经成为必然要求

AngularVue.jsReactMVVM

vue chameleon WePY uni-app Mpx

为什么你要学习Vue.js源码?市场需求与人才现状间存在不少现实矛盾：·很多初学者通过简单的培训后便入行，但所学大多是 Demo级别的项目知识到了真实的工作环境中往往水土不服·工作中只会简单地调用API，而复杂的组件非常依赖开源的实现如果找不到相关组件甚至难以完成开发需求

市场需求与人才现状间存在不少现实矛盾：·没有深入研究过，或者根本不懂Vue.js底层实现原理开发中遇到Bug后不懂得如何分析解决问题，也不懂如何调试；·工作中往往需要通过阅读源码去了解当前项目和一些第三方依赖库的实现方式和原理但是简单的知识填充式的培训并不能教会这些，初学者也很难自己形成这样的能力

面试官考察技术背后的实现原理来判断你对技术的掌握程度

了解技术实现原理是前端工作的必然要求看源码是了解技术实现原理的最直接手法是高效提升个人技术能力的有效途径

01有助于提升你的JavaScript 功底
02提升工作效率，形成学习与成长的良性循环
03借鉴优秀源码的经验，学习高手思路
04提升自己解读源码的能力

理我都懂，就是做不到？为什么却很少有人愿意去读源码呢?·因为学习源码很枯燥，不像开发项目那样能够快速得到反馈、看到立竿见影的效果·学习源码相对于开发项目来说更抽象，理解起来也更难，很多人学着学着就放弃了·还有很多人想要更深入地学习Vue.js，希望能够再进阶一个高度，却不得法门

对Vue.js3.0的源码进行透彻分析，但不会一味地去解释源码而是更加注重解读Vue.js在实现某个feature 的时候它的设计思想是什么以及为什么会这么做

使用官方的一个模板导出工具，在线调试模板的实时编译结果，辅助学习在vue-next 源码packages/template-explorer/dist/template-explorer.global.js中的关键流程打debugger 断点，然后在根目录下运行npm run dev-compiler命令接着访问http://localhost:5000/packages/template-explorer调试即可

'模块一导读 组件的实现：直击 Vue 核心的实现mp4'
'模块三导读 编译和优化：了解编译过程和背后的优化思想mp4'

编译和优化开发组件的方式：·编写template模板去描述组件的 DOM结构·Vue.js内部需要把template编译生成render函数

'模块二导读 逻辑复用最佳实践：Compoition APImp4'
'模块五导读 内置组件：学习 Vue 内置组件的实现原理mp4'
'模块四导读 实用特性：探索更多实用特性背后的原理mp4'

Vue.js除了核心的组件化和响应式之外还提供了很多非常实用的特性供我们使用比如组件的props、slot、directive等特性

'特别放送导读 研究 Vue 官方生态的实现原理mp4'
'结束语 终点也是起点mp4'

请你不要放弃源码学习！建议你多看几遍课程，动手去写Demo，去用debugger单步调试，

源码大多是用原生的JavaScript编写的学习过程中你的原生JavaScript的功力也会得到提升

学习了Vue.js源码，深入了解了Webpack的源码负责BetterScroll2.0重构，

目录：/326_Vue.js 3.0 核心源码解析 [3.7G]
├──导读 一文看懂 Vue.j 3.0 的优化_4054 [169.6M]
│ └──导读 一文看懂 Vue.j 3.0 的优化.mp4 [169.6M]
├──结束语 终点也是起点_4743 [38.3M]
│ └──结束语 终点也是起点.mp4 [38.3M]
├──开篇词 解析 Vue.j 源码，提升编码能力_4053 [115.1M]
│ └──开篇词 解析 Vue.j 源码，提升编码能力.mp4 [115.1M]
├──模块二导读 逻辑复用最佳实践：Compoition API_4242 [14.2M]
│ └──模块二导读 逻辑复用最佳实践：Compoition API.mp4 [14.2M]
├──模块三导读 编译和优化：了解编译过程和背后的优化思想_4505 [15.7M]
│ └──模块三导读 编译和优化：了解编译过程和背后的优化思想.mp4 [15.7M]
├──模块四导读 实用特性：探索更多实用特性背后的原理_4741 [4.9M]
│ └──模块四导读 实用特性：探索更多实用特性背后的原理.mp4 [4.9M]
├──模块五导读 内置组件：学习 Vue 内置组件的实现原理_4742 [6.1M]
│ └──模块五导读 内置组件：学习 Vue 内置组件的实现原理.mp4 [6.1M]
├──模块一导读 组件的实现：直击 Vue 核心的实现_4078 [15.7M]
│ └──模块一导读 组件的实现：直击 Vue 核心的实现.mp4 [15.7M]
├──特别放送导读 研究 Vue 官方生态的实现原理_4072 [10.4M]
│ └──特别放送导读 研究 Vue 官方生态的实现原理.mp4 [10.4M]
├──01 组件渲染：vnode 到真实 DOM 是如何转变的？_4055 [258.1M]
│ └──01 组件渲染：vnode 到真实 DOM 是如何转变的？.mp4 [258.1M]
├──02 组件更新：完整的 DOM diff 流程是怎样的？（上）_4056 [133.4M]
│ └──02 组件更新：完整的 DOM diff 流程是怎样的？（上）.mp4 [133.4M]
├──03 组件更新：完整的 DOM diff 流程是怎样的？（下）_4057 [215.9M]
│ └──03 组件更新：完整的 DOM diff 流程是怎样的？（下）.mp4 [215.9M]
├──04 Setup：组件渲染前的初始化过程是怎样的？_4058 [245.9M]
│ └──04 Setup：组件渲染前的初始化过程是怎样的？.mp4 [245.9M]
├──05 响应式：响应式内部的实现原理是怎样的？（上）_4059 [143.9M]
│ └──05 响应式：响应式内部的实现原理是怎样的？（上）.mp4 [143.9M]
├──06 响应式：响应式内部的实现原理是怎样的？（下）_4245 [168.2M]
│ └──06 响应式：响应式内部的实现原理是怎样的？（下）.mp4 [168.2M]
├──07 计算属性：计算属性比普通函数好在哪里？_4060 [104.8M]
│ └──07 计算属性：计算属性比普通函数好在哪里？.mp4 [104.8M]
├──08 侦听器：侦听器的实现原理和使用场景是什么？（上）_4061 [139.9M]
│ └──08 侦听器：侦听器的实现原理和使用场景是什么？（上）.mp4 [139.9M]
├──09 侦听器：侦听器的实现原理和使用场景是什么？（下）_4343 [120.8M]
│ └──09 侦听器：侦听器的实现原理和使用场景是什么？（下）.mp4 [120.8M]
├──10 生命周期：各个生命周期的执行时机和应用场景是怎样的？_4062 [152.8M]
│ └──10 生命周期：各个生命周期的执行时机和应用场景是怎样的？.mp4 [152.8M]
├──11 依赖注入：子孙组件如何共享数据？_4063 [96.5M]
│ └──11 依赖注入：子孙组件如何共享数据？.mp4 [96.5M]
├──12 模板解析：构造 AST 的完整流程是怎样的？（上）_4064 [116.6M]
│ └──12 模板解析：构造 AST 的完整流程是怎样的？（上）.mp4 [116.6M]
├──13 模板解析：构造 AST 的完整流程是怎样的？（下）_4491 [62M]
│ └──13 模板解析：构造 AST 的完整流程是怎样的？（下）.mp4 [62M]
├──14 AST 转换：AST 节点内部做了哪些转换？（上）_4065 [102.6M]
│ └──14 AST 转换：AST 节点内部做了哪些转换？（上）.mp4 [102.6M]
├──15 AST 转换：AST 节点内部做了哪些转换？（下）_4492 [124.9M]
│ └──15 AST 转换：AST 节点内部做了哪些转换？（下）.mp4 [124.9M]
├──16 生成代码：AST 如何生成可运行的代码？（上）_4066 [83M]
│ └──16 生成代码：AST 如何生成可运行的代码？（上）.mp4 [83M]
├──17 生成代码：AST 如何生成可运行的代码？（下）_4493 [137.4M]
│ └──17 生成代码：AST 如何生成可运行的代码？（下）.mp4 [137.4M]
├──18 Prop：Prop 的初始化和更新流程是怎样的？_4067 [139.7M]
│ └──18 Prop：Prop 的初始化和更新流程是怎样的？.mp4 [139.7M]
├──19 插槽：如何实现内容分发？_4068 [89.4M]
│ └──19 插槽：如何实现内容分发？.mp4 [89.4M]
├──20 指令：指令完整的生命周期是怎样的？_4069 [91.4M]
│ └──20 指令：指令完整的生命周期是怎样的？.mp4 [91.4M]
├──21 v-model：双向绑定到底是怎么实现的？_4070 [98.7M]
│ └──21 v-model：双向绑定到底是怎么实现的？.mp4 [98.7M]
├──22 Teleport 组件：如何脱离当前组件渲染子组件？_4071 [71.4M]
│ └──22 Teleport 组件：如何脱离当前组件渲染子组件？.mp4 [71.4M]
├──23 KeepAlive 组件：如何让组件在内存中缓存和调度？_4073 [105.4M]
│ └──23 KeepAlive 组件：如何让组件在内存中缓存和调度？.mp4 [105.4M]
├──24 Tranition 组件：过渡动画的实现原理是怎样的？（上）_4074 [56.8M]
│ └──24 Tranition 组件：过渡动画的实现原理是怎样的？（上）.mp4 [56.8M]
├──25 Tranition 组件：过渡动画的实现原理是怎样的？（下）_4784 [109.8M]
│ └──25 Tranition 组件：过渡动画的实现原理是怎样的？（下）.mp4 [109.8M]
├──26 Vue Router：如何实现一个前端路由？（上）_4075 [191.1M]
│ └──26 Vue Router：如何实现一个前端路由？（上）.mp4 [191.1M]
└──27 Vue Router：如何实现一个前端路由？（下）_4076 [84.9M]
└──27 Vue Router：如何实现一个前端路由？（下）.mp4 [84.9M]