Vue源码主体分析
vue的响应式和react的函数式编程思想是很不同的。
vue最基本的原理是对getter和setter的代理模式。以及观察者模式。
当数据发生变化时,通知观察者。
而watcher是通过触发数据的getter,成为观察者的。
vue的生命周期中,
在create阶段,vue创建了实例。
在mount 阶段,vue初始化了响应式(数据劫持)。
在update阶段,通过dom diff, vue可以做到对未改变的dom的复用。同一层的如果有设置key,diff得时候就不需要去一一对比,速度会更加快。
首先,vue是如何做到把template最后变成dom元素的呢?
1.通过正则处理template,生成ast之后,经过优化(静态标记),再生成字符串。
2.把字符串作为参数传给 new Function。生成render函数。
3.执行render函数,生成vnode,也就是虚拟dom.
4.patch,如果是在初始化过程中,就根据vnode直接创建dom,否则就进行dom diff。
5.替换挂载dom节点。
(子组件其实是在父组件patch的时候才开始create的,但是最先完成patch)
(vue代码有不同作用域的同名函数。。createComponent)
当最内部的子组件__patch__完毕之后,,vue通过restore操作activeInstance(递归)创建了prent和children的引用关系。
至于组件slot的处理,是在执行render函数的过程中,用parse出来的children代替了<slot>
watcher分为3种,第一种是renderWatcher,就是实现dom响应式的主watcher,一种是computed watcher,加了缓存,如果数据不改变就用缓存的数据,另外一种就是用户的watch了。其中有immediate,deep等差异。
总之,就不贴具体代码啦
最新文章
- C++实现类似飞鸽的内网聊天工具,采用多播的协议实现
- Linux DHCP通过OPTION43为H3C的AP下发AC地址
- SQL Server遍历表的几种方法 转载
- apache php env build
- .NET中TextBox控件设置ReadOnly=true后台取不到值的解决方法
- Linux文件管理系统
- codeforces 597C (树状数组+DP)
- LeetCode 345
- YII数据库增删查改操作
- MAC 10.10 apache 服务器配置
- HDU 5898 odd-even number(2016沈阳网络选拔赛 数位DP)
- 需求收集过程实例之 - GF Phase 1
- C++ STL 容器之栈的使用
- print number
- react中input自动聚焦问题
- SpringMVC拦截静态资源的处理办法
- c# partial 分部类和分部方法
- Guava的RateLimiter在单机限流中的正确用法
- zabbix系列(五)zabbix3.0.4 探索主机Discovery自动发现主机详细图文教程
- (未完成)在block内如何修改block外部变量