No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist add Sep 7, 2017
examples add 2.5 Sep 7, 2017
src add Sep 7, 2017
tools add read me Aug 10, 2017
.editorconfig add 1.2 Aug 16, 2017
.gitignore add Aug 23, 2017
README.md mod readme Sep 7, 2017
branches.txt add 2.5 Sep 7, 2017
package.json modify article Aug 12, 2017
webpack.config.js add 2.5 Sep 7, 2017

README.md

如何学习Vue2源码

背景

近期我们把微信公众平台管理端的前端框架切成 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案例 (源码总共 2832 行,查看代码查看新增代码)

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

  3. 第三章 Vue进阶

    • 3.1 生命周期

    • 3.2 自定义组件

      • 3.2.1 Vue.extend

      • 3.2.2 简单的自定义组件

      • 3.2.3 组件的prop

      • 3.2.4 组件的事件与原生事件

      • 3.2.5 slot

    • 3.3 nextTick

    • 3.4 指令

      • 3.4.1 自定义指令,内置 v-show 指令

      • 3.4.2 内置 v-text v-html 指令

    • 3.5 双向绑定 v-model 指令

附录

  1. VNode render

关于我

博客:http://rapheal.sinaapp.com/

微博:@raphealguo