Vue 2 源码阅读笔记

最新推荐文章于 2023-05-21 22:42:23 发布
最新推荐文章于 2023-05-21 22:42:23 发布
阅读量219 收藏
点赞数
分类专栏： 拉勾大前端训练营
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bruski/article/details/108700416
版权

本周末跟着拉勾前端训练营课程，学习Vue2.6的源码，终于对我们工作常用的框架有了深入的探索。Vue的设计确实轻巧精妙，代码结构、表意都十分清晰，不仅对Vue框架有窥视，还学习了漂亮的代码是怎么编排的，收获颇丰。

但第一遍看下来，还是有许多不解困惑的地方，尤其是 数据响应式部分，Observer / Dep / Watcher 的调用有点绕，还需反复咀嚼！

今天就先把各个部分的思维导图笔记记录一下。

思维导图笔记

前置

在这里插入图片描述

Vue初始化

在这里插入图片描述

入口

在这里插入图片描述

初始化静态成员

在这里插入图片描述

初始化Vue实例属性

在这里插入图片描述

init 过程

在这里插入图片描述

initState过程

在这里插入图片描述

首次渲染过程

在这里插入图片描述

数据响应式的过程

在这里插入图片描述

异步更新(nextTick)过程

在这里插入图片描述

Bruski
关注
专栏目录
阅读更多：一个基于Vue2全家桶和追书神器api开发的读书WebApp
02-06
前言 初学vue.js，官网的文档写的很清楚，看着不难。俗话说：光说不练假把式。程序猿学个新东西还是要敲出来看看效果比较好。最开始是想搞一个音乐类的，毕竟天天都会听歌，但发现搞音乐类的太多了，我再搞个多没意思。考虑了一下，还是搞个看书的吧，这个还是很少有人搞的。找了找最终效果因为api数据的限制，参考了起点中文网app，起点中文网web端，以及追书神器web端，再加上自己的一些想法搞出来的。项目中的小图标使用的是 。 技术栈 vue2 + vuex + vue-路由器+ webpack + ES6 + axios + sass 原始地址 访问地址 （pc端请用chrome手机模式预览） 扫描
vue2 源码阅读理解
Alex__King的博客
09-11 222
......
Vue2 源码阅读(一) 准备工作
嘿嘿
04-18 116
vue版本：2.6.11 vue仓库：https://github.com/vuejs/vue vue文档：https://cn.vuejs.org/ 转自https://www.cnblogs.com/polk6/p/13153299.html
vue2源码阅读--(一)--flow
weixin_42349568的博客
09-23 1246
js是动态类型语言， Vue.js 在做 2.0 重构的时候，在 ES2015 的基础上，除了 ESLint 保证代码风格之外，也引入了 Flow 做静态类型检查。之所以选择 Flow，主要是因为 Babel 和 ESLint 都有对应的 Flow 插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力。现在我们使用这个flow，需要运行npm run flow才能看到报错，意义不大，我们引入它的最初目的是想要在写代码的时候就出现报错。文件， 它是 Flow 的配置文件。
vue2源码浅读(二)：vue初始化
陈小陈的博客
07-13 504
vue初始化
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
vue2笔记和案例 vue2 笔记和案例
04-17
本笔记和案例将深入探讨Vue 2的核心概念和实践应用。 1. **Vue实例**： - Vue实例是Vue应用的基础，它包含数据、方法、生命周期钩子等属性。创建Vue实例时，可以传递一个选项对象，定义初始数据、计算属性、方法、...
vue商城项目笔记+原代码
04-30
在这个"vue商城项目"中，我们看到开发者不仅提供了详细的开发笔记，还附带了完整的源代码，这对于初学者或者希望深入理解Vue.js在实际项目中应用的人来说，是一份极其宝贵的学习资源。 首先，让我们来看看Vue全家桶...
vue-reading:Vue源码阅读
03-23
Vue.js源码的分析过程，详细记录了Vue源码阅读过程中的所有的心得和收获，通过阅读的过程大大加深对Vue的理解。 核心 Vue的合并策略 Vue双向绑定的实现 Vue生命周期 Vue组件树生成过程 Vue初始化过程 Vue Diff过程 ...
2023前端VUE源码笔记（语雀画板）
最新发布
09-27
2023前端VUE源码笔记（语雀画板）
vue2.x源码解析（一）
weixin_45514326的博客
08-12 2553
本文以vue2.x框架作为分析，简单记录整个源码编译的过程。
vue2源码解析（学习笔记）
weixin_47454918的博客
04-18 2665
vue源码调试解析
Vue2.0源码解析——编译原理
Hi,印象钟情
03-21 263
实际上Vue最终在渲染函数的时候是通过js进行渲染的，Vue封装了所有创建DOM的操作，基于虚拟dom来渲染真实dom（真实dom包含太多无用属性，操作起来太消耗性能），因此创建一个虚拟dom对这个虚拟dom进行操作，最后生成一个最终的虚拟dom,然后利用js创建dom的方法生成真实dom。那是以因为当我们在书写出一个Vue的模板的时候，Vue会在内部做一个编译的过程，这个过程就是把我们写的浏览器不认识的带有指令版本的模板(中可以找到所有创建DOM的方法，而这些方法最终会被引用用于创建真正的DOM。
Vue2源代码解读(含源码)
weixin_43263566的博客
05-21 2569
Vue2源代码解读(含源码)
教你阅读vue源码的正确姿势，看完就学废！
weixin_52546522的博客
04-30 5683
简介一下个人阅读vue源码的姿势，有建议欢迎评论区补充哈～ 一、源码阅读姿势 1. 先整体 - 后细节 先弄清楚源码分为哪几个模块，整套流程是怎么将各个模块串起来的。 然后细化了解每个模块的核心原理。 2. 站在别人的肩膀上 不用一股脑扎进源码仓库里一点点啃，这样很低效，适用于对源码较为了解的人 推荐先读别人的源码简介，源码分析，弄清楚脉络，还有每个部分的大概功能和核心流程。心里带着思路去看源码实现。 多数情况不需要逐行代码的细究，但针对某些核心功能的实现需要细究，例如：虚拟dom、diff算法、.
vue2源码浅读(一)：走进vue2源码
陈小陈的博客
07-10 1311
vue2源码
Vue2.x 源码阅读思路笔记
余阿良的博客
06-30 606
背景 在解决Vue项目中问题的过程中，仅仅片段了解过部分源码。随着使用的深入，希望整体了解这个框架的设计思想和细节。 在Github中发现了这份笔记，完整的记录了实现Vue框架的完整过程，通过参考这些笔记，我节省了大量的阅读时间。推荐给大家。 参考：https://github.com/raphealguo/how-to-learn-vue2-blob 以下内容为自己的笔记，仅供自己整理思路用...
vue2源码解读笔记(一)
gcc_java的博客
01-21 1910
背景：前端自我学习到了一个瓶颈 方式：从网络获取别人的文章资料，学习实践，添加自己遇到的问题和解决方式 目的：读懂vue部分源码，体验vue的设计方式，弥补源码涉及到但本人不具备的知识 一 源码下载，调试见歹佬原文：https://juejin.cn/post/6949370458793836580 （可以直接看歹佬的原文，不止技术厉害，文章也写得好。我这里是个人学习的笔记，可能你也遇到了，可以参考） 二 Vue 初始化过程 1、Vue 构造函数在 /src/core/instance/index.js.
XML与JSON，java解析和生成XML，java解析和生成json
qq_43206800的博客
09-09 555
XML 特性: xml具有平台无关性, 是一门独立的标记语言. xml具有自我描述性 为什么学习XML 网络数据传输. 数据存储 配置文件 XML语法格式 XML文档声明 <?xml version="1.0" encoding="UTF-8"?> 标记 ( 元素 / 标签 / 节点) XML文档,由一个个的标记组成. 语法: 开始标记(开放标记): <标记名称> 结束标记(闭合标记): </标记名称> 标记名称: 自定义名称，必须遵循以下命名规则： 1.名
Vue2与Vue3核心知识点总结与组件通信详解
- 数据绑定模式：Vue 2有函数式数据绑定和对象式数据绑定的区别，前者修改单个数据源不会影响其他引用，后者会同步更新。 - 组件实例化：每次使用 `vue.extend` 创建新组件会产生独立实例，即使在模板中多次使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值