1.1 命令式和声明式

1.1.1、什么是命令式框架？

命令式框架的一大特点就是关注过程。例如jQuery就是典型的命令式框架。

1.1.2、什么是声明式框架？

声明式的框架不关心功能实现的过程，更加关注结果。例如Vue.js。

1.2 性能与可维护性的权衡

1.2.1 命令式和声明式的优缺点？

命令式代码的性能更优：声明式代码比命令式代码多了找出差异的性能消耗。声明式框架一般也是通过封装命令式代码才实现了面向用户的声明式。

声明式代码的可维护性更强：在采用命令式代码开发的时候，我们需要维护实现目标的整个过程，包括手动完成DOM元素的创建、更新、删除等工作。而声明式代码展示的就是我们要的结果，看上去更加直观，至于做事儿的过程，并不需要我们关心，声明式框架一般会封装好。

1.3 虚拟DOM的性能到底如何

1.3.1 虚拟DOM的作用？

1、声明式代码的更新性能消耗 = 找出差异的性能消耗 + 直接修改的性能消耗：1、虚拟DOM通过Diff找出差异是在JavaScript层面的运算，相比innerHTML的DOM层面运算有很大优势。2、虚拟DOM在更新页面时只会更新必要的元素，innerHTML需要全量更新。借助虚拟DOM能够最小化找出差异的性能消耗，这时就体现出了虚拟DOM的优势。

2、频繁的DOM操作会导致大量页面元素的重绘和回流，处于性能优化的考虑我们应该减少重绘和回流的操作。而对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真实DOM上，只需要进行一次重绘和回流，提高了性能。

1.4 运行时和编译时

1.4.1 什么是运行时和编译时？

简单来说，运行时是指一段代码，直接扔进浏览器里能运行，编译时是指一段代码不能直接在浏览器里跑，需要先经过编译器编译，再放到浏览器里才能运行。

1.5 总结

首先分析了命令式框架和声明式框架，命令式代码的性能更优，声明式代码的可维护性更强 => 选择声明式，优化其性能 => 使用虚拟DOM（Diff算法）

graph TD
命令式or声明式 --> 声明式 --> 提高维护性 --> vue
运行时和编译时 --> 运行时+编译时 --> 提高性能 --> vue