1、React 的 jsx 和 Vue template 有什么区别，为什么要这样使用？
答：React的JSX和Vue的Template本质上都是为了解决UI组件的声明和渲染，只是采用了不同的设计思路。
设计理念：
- React推崇 "组件及函数，逻辑及视图"，用函数式编程思想构建组件;
- Vue推崇 "声明式模版"，让模版更像传统的HTML，学习门槛比较低;
本质区别:
- React的jsx是JavaScript的扩展语法，可以在JS代码里直接写类似XML的标签，是JS和UI的统一表达;
- Vue的Template是基于HTML模版的语法，模版和JS是分离的;
优缺点:
- JSX灵活性高、易于调试、类型检查友好；缺点：学习曲线陡峭;
- Template语法直观，上手快；缺点：复杂逻辑的表达不如JSX灵活;
2、什么是虚拟 DOM ? Vue 和 React 为什么都要引入虚拟 DOM ?
虚拟DOM : 虚拟DOM是用JS对象表示真实DOM结构的轻量副本(也就是用js对象描述的DOM结构)，可以通过它在内存中对UI做变更和比较，最后一次性同步更新真实DOM，以提高性能和开发体验。
Vue和React都引入虚拟DOM的原因 : 操作真实DOM性能消耗大，不容易维护；每次操作真实DOM都会导致重排(Reflow)和重绘(Repaint),严重影响渲染性能，可能导致掉帧和卡顿。
扩展
- 重排(Reflow):浏览器计算元素的尺寸和位置；
- 添加/删除元素
- 改变元素的尺寸、位置(width、hight、display、font-size、margin、padding)
- 窗口大小的改变
- 重绘(Repaint):浏览器将元素的样式绘制出来；
- 发生在元素外观改变时，但布局尺寸没有改变时；
- 只改变了color、background-color、visibility、box-shadow
注：
- 重排会触发父元素和子元素的布局全部重新计算，所以消耗较大；
- 重绘只是修改了元素颜色，不需要重新布局所以消耗性能小于重排；
- 重排必会引起重绘
浏览器渲染一帧的流程:
JS 执行 → 修改DOM → 计算样式 → 布局(重排) → 绘制(重绘) → GPU合成 → 显示
