如何学习Vue2源码
发布在Web知识2017年12月15日view:1319
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

背景

近期我们把微信公众平台管理端的前端框架切成 MVVM 架构,框架层面最终我们选择了 Vue,为了更了解 Vue,阅读Vue源码是必要的。

我参考的 Vue 版本是 2.2.0,整个项目的代码1万2千行,如果不搞清楚原理,直接每一行看下来肯定会漏掉不少细节,或者对作者为什么这样写代码感到莫名其妙。

如此庞大的项目要啃下来并非易事,里边涉及到非常多的概念:Virtual Dom; 条件/列表渲染; 自定义组件; 双向绑定; 指令等等。

按照经验,编写这么庞大的系统,我们总是从第1行代码开始写起,慢慢写到第1万行,逐步构造出整个系统/框架。

所以我也会按照这个思路,从零开始构造出一个完整的Vue框架。

如何运行

how-to-learn-vue2项目 下载各个分支代码

使用 webpack 进行打包,源码采用ES6风格编写。

构建: npm install; webpack

统计当前分支源码行数: npm run line

运行 Demo: 直接使用 Chrome 打开 examples 目录里边的实例代码即可

如何阅读

建议按照下边顺序阅读,同时参考 官方的教程 配合理解。

我会把每个章节的 源码行数 以及 对应的分支 标记出来,方便大家可以看到每次源码变更的行数。

  1. 第一章 基础概念

  2. 第二章 Vue雏形

    • 2.1 VNode 的属性 attrs 和 props (源码总共 1112 行,查看代码查看新增代码)

      在前边我们忽略了 Dom 元素的属性,我们这一节就把这个补齐,同时从这一节开始我们来逐步完善一个 Vue 的 todo 案例。

    • 2.2 控制语句

    • 2.3 数据绑定

      • 2.3.1 响应式原理 (源码总共 1547 行,查看代码查看新增代码)

        在之前的例子中,我们总是通过 vm.setData( { a:1, b:2 /* 需要填写整个完整的 data */} ) 来改变数据,从而引起界面的响应式变化。为了提高开发效率和可读性,我们更希望使用 vm.a = 3 来修改值,从而更新视图。

      • 2.3.2 深度追踪依赖变化 (源码总共 2245 行,查看代码查看新增代码)

        在 2.3.1 节中,只要任何数据变化都一定会引起 VNode 树的更新计算,显然不是最高效的,因为界面不一定绑定了所有 vm 的所有属性,那些没被绑定的属性的更新不应该引起整个 vm 的 VNode 树计算,所以我们要追踪整个 VNode 树依赖的变化。

    • 2.4 事件处理器

      • 2.4.1 事件处理 (源码总共 2391 行,查看代码查看新增代码)

        前边一直在介绍如何渲染界面,当你需要和界面做交互的时候,就需要涉及到 Dom 的事件处理,所以在这一节,我们也要往之前的模型里边加上监听事件的语法。

      • 2.4.2 完善事件语法以及事件修饰符 (源码总共 2563 行,查看代码查看新增代码)

        2.4.1节设计的 v-on 语法仅接受方法名: v-on:dblclick="editTodo" ,由于语法过于局限,所以没法在触发 editTodo 事件的时候知道当前元素映射的数据,更好的语法应该是 v-on:dblclick="editTodo(todo)" ,此外这一节也新增点语法糖: Vue 的事件修饰符。

    • 2.5 完成todo案例 (源码总共 2875 行,查看代码查看新增代码)

      基本的 Vue 雏形就完成了,我们把一些代码重新组织了一下,新增了一点点语法糖(绑定-HTML-Class),完善了整个 todo 的案例(查看代码)。到这一节结束,Vue 的工作原理已经剖析清楚了。

  3. 第三章 Vue进阶

附录

  1. VNode render
评论
发表评论
暂无评论
WRITTEN BY
raphealguo
微信web前端开发
TA的新浪微博
PUBLISHED IN
Web知识

尝试用简易通俗的叙述方式来梳理相关Web知识

我的收藏