Vue.js

1、MVC和MVVM

  MVC中M表示Model，V表示View，C表示Controller。Controller用来作为所有视图的容器，处理Controller之间的跳转，将Model显示到View上。

  MVVM中的M表示Model，V表示View，VM表示Model-View；VM用来把Model中的数据解析并显示到View上，同时负责把View上的修改同步到Model中；

  MVC中的Controller主要用于存储视图，处理视图之间的跳转，而MVVM中的VM主要用于数据解析，实现Model与View之间的数据同步；

 

2、双向绑定

  实现双向绑定的方案：

    1 发布订阅模式

    2 数据劫持

    3 Angular的脏查机制

  Vue采用数据劫持与发布订阅模式相结合的方式实现双向绑定，数据劫持主要通过Object.defineProperty实现。

  我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

流程图如下：

 

3、真实DOM的绘制流程

  创建DOM树 -> 生成CSS样式表 -> 关联DOM树和CSS样式表形成Render树 -> 为Render树上的每一个节点进行定位 -> 调用每个节点的paint方法绘制节点。

 

4、使用虚拟DOM的优势

  js在短时间内对DOM有n次修改时，真实DOM会n次重绘整个DOM树。 使用虚拟DOM可以将n次修改进行DIFF比较，最后一次更新指定的DOM片段。