- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端达人
Vue 3 源码导读
关注前端达人，与你共同进步 作者：方应杭 链接： https://juejin.im/post/5d977f47e51d4578453274b3 来源：掘金 5号凌晨，尤雨溪公布了 Vue 3 源代码 话不多说，我们趁热对 Vue 3 源码进行一些简要的分析。 如果你还没有阅读过 Composition API RFC，可能无法完全看懂下面的内容。 如果你还没有学习 TypeScript，请尽快学习，否则可能看不懂源码。 另外有件事情说出来可能会让你非常惊讶，Vue 3 的源代码完全没有使用 class 关键字！ /runtime-dom' 阅读建议 我兴奋地立刻把 Vue 3 源代码扫了一遍，发现其 TypeScript 代码结构清晰，非常好读，于是我写了一篇《Vue 3 源码导读》，点击下方的「阅读原文」即可查看全文 我没有直接把文章内容复制过来，是因为微信后台的编辑器实在太垃圾啦 :) 强烈推荐大家用假期这段时间把 Vue 3 的源码通看一遍，因为目前的代码结构清晰，而且代码量相对较少。
1.7K00发布于 2019-10-10 - 来自专栏玩转大前端
vue3 源码解析
得益于 Vue 3 良好的模块划分，开发者在使用 Vue 3 时可以按需选择需要的模块引入，而不用一次性将所有的代码全部引入，这样在打包时 Vue 3 中没有被引用的源码将被移除。 但相比上述变化，这些都显得不是那么重要，因此不花更多篇幅进行解读 二、Vue3整体结构和源码目录 1、单体仓库模式 我们非常熟悉的模式是一个 npm 包对应一个 git 代码仓库，这样做的好处是代码仓库中的代码边界清晰 3 将响应式数据的逻辑单独提出来作为一个独立的模块了，即源码中的reactivity包，在 npm 上是@vue/reactivity 当一个数据被包装成响应式数据时，它的读取和修改方法会被 Proxy 四、compiler源码解析 和 Vue 2 一样，compiler 的主要作用是解析 Vue 中的模板部分，最终将模板转换成render()方法 整个编译过程分为 3 步： 调用 baseParse( 1、parse 首先看模板解析并生成 AST 的过程，Vue 3 的模板解析是非常典型的代码解析方法，即从源码的第 1 个字符开始逐个字符进行扫描，每当找到可以识别的对象则将该对象放入 AST，并接着之前的源码位置往下继续解析
1K11编辑于 2022-08-15 - 来自专栏前端框架源码剖析
Vue3源码04: Vue3响应式系统源码实现12
Vue3源码01 : 代码管理策略-monorepo Vue3源码02: 项目构建流程和源码调试方法 Vue3源码03: Vue3响应式核心原理 “我们在前一篇文章中手写实现了一个极简版的响应式系统 关于reactivity的源码实现细节分析会通过两篇文章完成。 在下一篇文章中再探索一些具体api的功能以及对应的源码实现细节。 具体这些函数的功能，可以查阅vue3的官方文档，就不在此处赘述了。另外reactive.ts中还有7个工具函数，逻辑相对简单朋友们可以自行阅读，不作为本文重点进行介绍了。 有了这些基础，下一篇文章中，将会讨论一些reactivity暴露的具体api的功能及其对应的源码细节。
47250编辑于 2022-09-27 - 来自专栏前端框架源码剖析
Vue3源码05 : Vue3响应式系统源码实现（22）
Vue3源码01 : 代码管理策略-monorepo Vue3源码02: 项目构建流程和源码调试方法 Vue3源码03: Vue3响应式核心原理 Vue3源码04: Vue3响应式系统源码实现1 鉴于涉及了响应式系统的很多实现细节，这是一篇比较长的文章，文字加代码超过2万个字符，请大家在耐心和时间上做好准备，阅读完本文相信会让大家对Vue3响应式系统有深刻的理解。 事实上，在Vue3之前的版本，本身就是通过栈的形式来维护这种关系，为了性能上的提升，改为如今这种链式的方式维护，这也体现了Vue3框架作者们追求极致的精神。 Vue3在不断发展变化，对性能的追求从未停止，而对位运算的精准应用在源码中不少地方都有体现。目前关于位运算标记暂时先了解这些，在分析trackEffects的时候还会有所涉及。 将复杂度降到了最低，再次体现了Vue3作者们追求极致的精神。 下面对几个对外暴露的和EffectScope相关的函数。
1.2K31编辑于 2022-09-27 - 来自专栏网络日志
# 【vue3源码】九、ref源码解析
【vue3源码】九、ref源码解析 参考代码版本：vue 3.2.37 官方文档：https://vuejs.org/ ref接受一个内部值，返回一个响应式的、可更改的ref对象，此对象只有一个指向其内部值的 使用 const count = ref(0) console.log(count.value) // 0 count.value++ console.log(count.value) // 1 源码解析 而当使用state.value = { count: 3 }方式进行修改时，会命中set函数，因为新的值与旧的原始值内存地址不同，所以会触发副作用。 不会触发副作用 state.value.count = 2 // 主动触发副作用 triggerRef(state) // 可以自动触发副作用 state.value = { count: 3 如创建一个防抖ref，即只在最近一次set调用后的一段固定间隔后再调用： import { customRef } from 'vue' export function useDebouncedRef
43310编辑于 2024-06-26 - 来自专栏前端文章小tips
Vue3 源码解析（七）
依赖收集与副作用函数在上一篇文章《响应式原理与 reactive》中由于篇幅限制笔者留下了两个小悬念 track 依赖收集处理器与 trigger 派发更新处理器没有细致讲解，而在本篇文章中笔者会带着大家一起来学习 Vue3 Vue 是怎样追踪变化的？ 所以对照 Vue2 的源码，从概念上来讲，将依赖看成是一个维护了订阅者 Set 集合的 Dep 类更容易理解，在 targetMap 中只是将 Dep 存储在一个原始的 Set 集合中，是出于减少内存开销的考虑 此时一次副作用函数的执行彻底结束，跟着笔者一起来看一下源码的实现。 收集依赖、派发更新 为了更逻辑顺畅的引出依赖收集和派发更新的工作及实现流程，笔者决定在此处引入一个 Vue3 中 effect 模块的一个简单的单元测试用例，给大家讲解示例的同时顺带聊聊依赖收集和派发更新
59910编辑于 2021-11-29 - 来自专栏Vue技术实践
如何调试vue3源码？
最近想系统学习一下vue3的源代码，本篇内容记录和分享一下如何调试vue3的源代码。 1. 下载源代码 1.1 github下载 想获取vue3的源码，需要直接从github上vue3的仓库获取，vue3github源码地址为： https://github.com/vuejs/core 注意 ，vue3的源码是在这个 core目录下，一些同学别一直找目录为vue3的文件夹，那是找不到的哈。 gitee地址：https://gitee.com/JingWa/vue3-next [gitee vue3 源码地址]现在，访问以上地址将源码clone 到本地就可以了 2. 安装依赖 2.1 使用VsCode打开源码 [vue3源码] 2.2 下载依赖 注意： 下载依赖时， 请使用 yarn 下载，使用 npm 不好使。 [使用yarn下载依赖] 3.
2.4K21编辑于 2022-02-19 - 来自专栏前端框架源码剖析
Vue3源码03: Vue3响应式核心原理
Vue3源码01 : 代码管理策略-monorepo Vue3源码02: 项目构建流程和源码调试方法 “本文会先对子项目reactivity进行一个基本的介绍，随后会介绍Vue3中的响应式原理，最后会编写一个极简版的响应式系统 Vue2和Vue3关于响应式的最重要的区别 从本质上讲Vue3的响应式原理和Vue2的响应式原理没有根本的不同。 主要有两个核心的差异： 利用的基础能力不同，Vue2利用了Object.defineProperty，Vue3利用了Proxy的相关API； Vue2是默认会让所有的数据具备响应式的能力，Vue3需要手动调用函数让特定数据具备响应式的能力 手写极简版Vue3响应式系统 “在Vue的世界，不管是Vue2还是Vue3，我们无论在template中写了什么内容，都会在程序内部转化成虚拟DOM，然后再将虚拟DOM转化成真实DOM，最后再将真实DOM 其实到了这里，我们可以认为自己已经理解了Vue3最核心的原理。在下一篇文章中，将会详细讲解reactivity项目中具体源码的实现细节，敬请朋友们期待。
69740编辑于 2022-09-27 Vue3源码解析，打造自己的Vue3框架
Vue3源码解析，打造自己的Vue3框架分析Vue3源码并尝试打造自己的Vue3框架是一个复杂但极具教育意义的项目。 准备阶段学习Vue3基础官方文档：首先，你需要熟悉Vue3的官方文档，了解Vue3的新特性、API变化以及组合式API（Composition API）。 源码分析阶段克隆Vue3仓库从GitHub上克隆Vue3的官方仓库，并切换到相应的分支（通常是main或next）。 阅读源码模块划分：Vue3的源码被划分为多个模块，如reactivity（响应式系统）、runtime-core（运行时核心）、compiler-core（编译器核心）等。 学习和实践：在阅读源码和实现框架的过程中，不断学习和实践新的知识和技能。社区和合作：加入Vue3的社区，与其他开发者交流和合作，共同学习和进步。通过上述步骤，你可以逐步打造出自己的Vue3框架。
28100编辑于 2025-01-02- 来自专栏前端工程师面试指南
Vue3源码解读之patch
例子位于源代码/packages/vue/examples/classic/目录下，下面是例子的代码：const app = Vue.createApp({ data() { return minimum-scale=1.0,user-scalable=no,target-densitydpi=medium-dpi,viewport-fit=cover" /> <title>Vue3 /dist/vue.global.js"></script></head><body>
- </script></body></html>Vue3源码视频讲解：进入学习源码解读关于Vue3中数据发生变更，最终影响到页面发生变化的过程，我们本篇文章只对componentEffect 为1，l2为4，e1为3，e2为3；第一次循环，old-d与new-b是不相同的，break；跳出循环，从尾部开始的循环结束；进入第一个if判断为false，进入第二个else-if判断为false，进入
52120编辑于 2022-09-28来自专栏路过君BLOG from CSDNvue3 vue-cli typescript 配置源码路径别名
文件中默认配置了src路径的别名@ "paths": { "my-service/*": [ "src/service/my/*" ], "@/*": [ "src/*" ] }, vue.config.js
51420编辑于 2022-04-13来自专栏前端框架源码剖析Vue3源码06: reactive、ref相关api源码实现
Vue3源码01 : 代码管理策略-monorepo Vue3源码02: 项目构建流程和源码调试方法 Vue3源码03: Vue3响应式核心原理 Vue3源码04: Vue3响应式系统源码实现1 /2 Vue3源码05 : Vue3响应式系统源码实现（2/2） “原本关于响应式源码的分析已经告一段落，因为有了前面几篇文章的基础，阅读剩余部分的源码已经比较容易。 这与Vue2中递归执行Object.defineProperty是有区别的，也是Vue3的一个重要的优点，性能上会有比较大的提升。 Vue3源码01 : 代码管理策略-monorepo Vue3源码02: 项目构建流程和源码调试方法 Vue3源码03: Vue3响应式核心原理 Vue3源码04: Vue3响应式系统源码实现1/ 2 Vue3源码05 : Vue3响应式系统源码实现（2/2）
96541编辑于 2022-09-27来自专栏Tz一号Vue3全局APi解析-源码学习
前言 不知不觉Vue-next的版本已经来到了3.1.2，最近对照着源码学习Vue3的全局Api，边学习边整理了下来，希望可以和大家一起进步。 我们以官方定义、用法、源码浅析三个维度来一起看看它们。 下文是关于Vue3全局Api的内容，大家如果有更好的理解和想法，可以在评论区留言，每条我都会回复~ 全局API 全局API是直接在Vue上挂载方法，在Vue中，全局API一共有13个。 节点，他们的作用是一样的，但是在VUE3中createVNode()函数的功能比h()函数要多且做了性能优化，渲染节点的速度也更快。 ('.')[0]) if (version === 3) { // Vue 3 } else if (version === 2) { // Vue 2 } else { // 不支持的 Vue 的版本 } 参考资料 Vue-next-GitHub Vue3官方文档 Vue3源码分析 vue3 VNode 结尾 好了，以上就是本篇全部文章内容啦。
2K30发布于 2021-07-08来自专栏编程之旅Vue3 源码解析（五）：Patch 算法
patch 的过程中主要完成以下几件事情： 创建需要新增的节点 移除已经废弃的节点 移动或修改需要更新的节点 Vue3 的 patch 优化 —— patchFlag 在尤大的多次有关 Vue3 的演讲中 当时我阅读此书后，觉得这样的总结非常贴切好记，也很好的帮助了我更浅显易懂的阅读 Vue2 的源码，所以在 Vue3 的子节点更新策略中我依旧打算沿用这样的叫法来描述更新策略。 Vue3 的子节点更新 下面为了讲述的流畅性，以及能够随时看到代码进行参考，我会把 patchKeyedChildren 函数拆分成一个一个的逻辑点，按我们讲述的节奏贴上源码以及对应的图片。 在子节点的更新中我们对比了 Vue2 与 Vue3 的更新策略的不同，并详细讲解了 Vue3 遇到存在 key 值的子节点是如何进行比较的。 以上 5 点即是 Vue3 中非常重要的子节点更新过程，如果觉得文章太长不看的朋友也可以直接了当的看总结。
1.7K11发布于 2021-06-09来自专栏终身学习者从 Vue3 源码学习 Proxy & Reflect
如果你使用的是Vue框架，尝试修改组件的 props 对象，它将触发Vue的警告日志，这个功能是使用 Proxy :) !
32910编辑于 2022-06-15来自专栏前端Qvue3源码解析--数据监听篇
内容简介 vue3自从2020.9.18正式发布以来，受到了前端业界的广泛关注，其中一个重大更新点便是vue3全新的数据监听模式。 本着严谨探究、求根问底的前置思维，以vue3实现数据监听的逻辑链路为导向，逐层破解vue3数据监听的实现原理，为大家揭开vue3源码的神秘面纱 通过本文你可以学习到 vue3通过proxy实现数据监听原理 vue3数据监听实现原理 在日常开发中，vue3提供的响应式api，最常用的便是reactive、ref、computed三种 为了配合这三大核心api，vue3又为框架补充了一批辅助性api。 源码的时候了解到 由于vue2使用Object.defineProperty,无法对数组生效 所以不得已而通过增强Array原型链方法的方式对数组进行依赖收集和触发更新 而vue3使用的Proxy代理方式 学习感悟及收获 阅读到这里 相信各位同学都已经对vue3的数据监听原理有所了解 也大致知道了vue2数据监听有何缺点，以及为何要升级到vue3 同时也对学习vue3源码的储备知识有所学习 文章的最后想要引用教员的一段话作为结尾
2K10发布于 2021-08-24来自专栏编程之旅Vue3 源码解析（三）：静态提升
什么是静态提升 Vue3 尚未发布正式版本前，尤大在一次关于 Vue3 的分享中提及了静态提升，当时笔者就对这个亮点产生了好奇，所以在源码阅读时，静态提升也是笔者的一个重点阅读点。 而 Vue3 也可以对 props 属性进行静态提升。
{{ text }}例如这段模板代码，Vue3 会跳过节点，仅仅将将不再会变动的 id="foo" 和 class="bar 对于 canStringify 这个变量，源码是这样解释的：有一些转换，比如 @vue/compiler-sfc 中的 transformAssetUrls，用表达式代替静态的绑定。 总结 今天的这篇文章，带大家一起阅读了 Vue 源码中静态提升的部分，笔者通过编译后代码的区别给大家直观的举例了静态提升到底有什么作用，它让编译后的代码产生了怎样的区别。1.2K10发布于 2021-05-13来自专栏编程之旅Vue3 源码解析（三）：静态提升
什么是静态提升 Vue3 尚未发布正式版本前，尤大在一次关于 Vue3 的分享中提及了静态提升，当时笔者就对这个亮点产生了好奇，所以在源码阅读时，静态提升也是笔者的一个重点阅读点。 而 Vue3 也可以对 props 属性进行静态提升。
{{ text }}例如这段模板代码，Vue3 会跳过节点，仅仅将将不再会变动的 id="foo" 和 class="bar" 对于 canStringify 这个变量，源码是这样解释的：有一些转换，比如 @vue/compiler-sfc 中的 transformAssetUrls，用表达式代替静态的绑定。 总结 今天的这篇文章，带大家一起阅读了 Vue 源码中静态提升的部分，笔者通过编译后代码的区别给大家直观的举例了静态提升到底有什么作用，它让编译后的代码产生了怎样的区别。1.1K20发布于 2021-05-12Vue3源码解析，打造自己的Vue3框架无密分享
Vue3源码解析，打造自己的Vue3框架随着前端技术的飞速发展，Vue.js 作为一款轻量级且功能强大的前端框架，受到了广大开发者的青睐。 Vue 3 作为 Vue.js 的最新版本，带来了许多令人振奋的改进和优化。本文将深入探讨 Vue 3 的源码，并基于这些理解，指导读者如何打造自己的 Vue 3 框架。 一、Vue 3 源码解析Vue 3 的源码基于 TypeScript 编写，采用了模块化的设计，使得整个框架更加易于维护和扩展。 源码主要由以下几个模块组成：Compiler 模块：负责将 Vue 模板编译成渲染函数。 二、打造自己的 Vue 3 框架在深入理解了 Vue 3 的源码之后，我们可以开始尝试打造自己的 Vue 3 框架。
58510编辑于 2024-06-25来自专栏前端框架源码剖析Vue3源码02: 项目构建流程和源码调试方法
Vue3源码01 : 代码管理策略-monorepo “作为一个现代前端框架，Vue3源码中包含了一系列的js脚本，支持对源码进行构建、发布，而构建又分为生产环境和开发环境两种不同场景的构建。 本文主要分析Vue3源码的构建流程，对于发布暂时不讲解。在构建流程分析结束后，再讲解一个源码调试的案例，同时也会讲解为什么可以这样调试。为后续深入源码细节打下基础，同时也方便大家动手实践调试源码。 当然对于Vue3的构建也不例外。在Vue3中，根据实际需要的不同，执行构建的命令是：pnpm run build或pnpm run dev。这里用pnpm还是npm没什么区别，为什么呢？ 构建工具不同 构建目标不同 构建流程不同 另外，在core/scripts（注：Vue3目前的项目根目录名叫core而不是之前的vue-next）目录下有下面几个文件： -core - scripts 调试案例 了解了如何对Vue3进行构建，下文就呈现一个小案例，对我们的Vue3中的子项目reactivity的源码进行调试。
1.2K20编辑于 2022-09-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号