Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue1.0 源码解析七:总结和展望 #10

Open
lihongxun945 opened this issue Jul 15, 2018 · 0 comments
Open

vue1.0 源码解析七:总结和展望 #10

lihongxun945 opened this issue Jul 15, 2018 · 0 comments

Comments

@lihongxun945
Copy link
Owner

#总结

看代码就像看电影一样,不懂的时候觉得到处都是迷,觉得主角周围发生的事都好不可思议,看懂了之后就能发现一根清晰的主线剧情,或是亲情,或是爱情,或是复仇,或是为名为財。所有之前那些迷都豁然开朗。

vuejs源码看下来也是,从3年前接触到vuejs开始,一直断断续续看了一些关于实现原理的文章,初看一堆概念:parser,compiler, observer, watcher 等等。每一部分都有复杂的细节实现。但是只要把握他的主线剧情:即如何把 state 和 dom 关联起来,使data的改动反应到DOM上,DOM的改动反应到 state 上。顺着这个思路比较容易看懂甚至自己实现一个类似的框架。

那么为什么vuejs几千行的代码量 我们只需要约 500 行代码就能实现呢?其实是因为我们省略了绝大部分的细节,这些细节很重要:

  1. 完善的生命周期,回调,完善的销毁机制
  2. 对表达式的支持,其中包括对四则运算,路径,以及函数调用的支持,这一块没细看,但是应该都是基于有限状态机实现的。
  3. 对DOM的各种边界情况的处理,比如 fragment
  4. 性能优化,batcher。
  5. 对props,slot 等的处理
  6. 常用的 directive 的实现

把上述这些全部实现,那么我们就能得到一个和vuejs几乎一样的框架出来,要不要试试?

关于 vue2.0

vue2.0 的源码解析系列我会再更新的,敬请期待。关于 vue2vue1 有哪些改动呢?主要是这几部分:

  1. vue2.0 引入了 Virtual DOM ,指令中将和 VM 交互,而不是直接调用原生的DOM API.我们的代码将彻底和 DOM 解耦
  2. 由于 VM 的引入,vue2 组件的生命周期有一些变化,增加了一个 patch阶段。
  3. 拥抱单向数据流,移除了父子组件的双向数据绑定。
  4. 源码中引入 flow 作为类型检查的工具。
  5. 很多的细节变化

更详细的改动可以参见官方文档 从 Vue 1.x 迁移

记住这几点

希望读过这几篇文章后,能记住以下几点

  1. 如果通过 getter/setter 实现数据响应化
  2. 在getter中记录依赖关系,而不是分析表达式
  3. batcher 会在 nextTick的时候执行全部的更新,默认情况下vue是不会立刻更新DOM的
  4. 记住下面这张出现了很多次的图

vue1.0源码解析系列 到此完结,谢谢大家~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant