toy-vue

Vue toys.

vue-base.html

一个不能再简单的 Vue 核心代码，一个不能再具体的 Vue 源码分析。（此处用了夸张的修辞手法）。代码参考了vue-come-true/vue-come-true-First，在此感谢原作者的整理。

PS: vue-base.html 需要在最新的 Chrome 上运行，因为用到了很多 ES6 的特性，比如：class, arrow function 等。当然，作为一个前端，我默认你的 Chrome 版本已经是最新了。

Vue 创建流程

Dep 和 Watcher 关系

• 模板中的每一个变量都是一个 Watcher, 通过 getter 加入到 Dep 的 subs 数组中
• 数据中的每一个属性都是一个 Dep，通过 setter 获得更新通知，并告知 subs 中的 watcher 调用 update 方法

流程图下载

你可以从 Google Drive 下载流程图。

注意点

• 图中的 DocumentFragment 在实际代码中会用 Virtual Dom 代替

• 图中的 Compile 在实际代码中会用 HTML Parser 做一些更具体的操作。如编译模板成可生成 Virtual Dom 的代码, 具体可查看/test/vue-template-compiler

  <div id="list" v-test><span>Hello</span></div>

  编译成 (使用vue-template-compiler) ==>

  with(this){return _c('div',{directives:[{name:"test",rawName:"v-test"}],attrs:{"id":"list"}},[_c('span',[_v("Hello")])])}

• 图中的 setter 和 getter 方法在实际代码中，还需要对 Array 中push，pop方法进行拦截，还需要对 data 进行深度绑定。

• 数据监听缺陷

  • 无法监听通过数组下标更新的数据
  • 无法监听数组 length 的变化

Simple Vue Compiler

Simple Vue Compiler基于pure-javascript-html-parser的HTML Parser（你可以在线测试这个模块）。

ASTElement 是从 HTML 转换到可 render 的代码过程中的中间对象。AST(Abstract Syntax Tree): 抽象语法树。（我们在写这个编译器的时候，AST 参考Hypertext Abstract Syntax Tree format )

基本的过程是：模板 => HTML 模板解析器 => 抽象语法树 => 生成可Render的代码。

在线测试 Simple Vue Compiler ，降模板编译成可Render代码的简易实现。

Vue 中对应的代码

• html-parser
• ASTElement

生成可 render 代码后，便可以通过render函数创建 virtual dom 了。

Virtual Dom

• simple-virtual-dom
• 深度剖析：如何实现一个 Virtual DOM 算法
• 最小编辑距离问题：递归与动态规划
• diff算法

netxTick

console.log(1);
Promise.resolve().then(() => console.log(2))
setTimeout(() => console.log(3), 0);
setTimeout(() => console.log(4), 0);
Promise.resolve().then(() => console.log(5))
console.log(6);
/*
output:
1 6 2 5 3 4
*/

更多关于 Promise, Mutation observers, Microtasks 的，请查看 Tasks, microtasks, queues and schedules.

References

• MVVM
• vue come true
• 深度剖析：如何实现一个 Virtual DOM 算法
• Pure JavaScript HTML Parser
• simple-virtual-dom
• aboutVue
• vue-analysis
• read-vue-source-code