面试题常问到：vue 和 react 的区别
相同点：
- 首先react 和vue 都是目前比较流行的前端框架，旨在解决开发效率和用户体验；
- 都有虚拟dom的概念 + diff 算法 操作真实dom
- 都是主要是声明式编程，同时支持命令式编程；支持函数式编程
- 都有组件化模块化思想
区别：
开发者
- vue： 中国尤雨溪
- react： facebook
复杂度
- vue：简单
- react：复杂灵活
数据绑定
- vue ：双向数据绑定
- react：单向数据流
模版渲染方式
- vue：接近html，使用v-if
- react：使用jsx（语法糖，最终会被编译成js）
diff 算法
React：
-
深度优先遍历：React的diff算法采用深度优先搜索的方式，从根节点开始，递归比较每个子节点。
-
策略重点：React的diff算法主要通过三大策略（tree diff、component diff、element diff）来降低算法复杂度，将O(n³)复杂度转化为O(n)复杂度。
- tree diff：忽略DOM节点跨层级的移动操作，只比较同一层级的节点。
- component diff：对于同一类型的组件，继续按层级比较Virtual DOM树；对于不同类型的组件，则替换整个组件的所有节点。
- element diff：对于同一层级的子节点，
通过唯一key进行区分，以优化节点操作（删除、插入、移动）。
-
节点替换：当发现节点不同时，React会进行节点的替换。
-
key的作用：在React中，key是用于帮助识别哪些项被修改、添加或删除的。当列表项的顺序改变时，React会使用key来重新排序和移动DOM元素，而不是销毁和重建它们。
Vue:
- 同层比较：Vue的diff算法同样只比较同一层级的节点，不会跨层比较。
- 双端比较：Vue采用了一种优化策略，即从新旧虚拟DOM的两端同时进行比较（双端比较），这可以更快地找到不匹配的节点，减少遍历次数。
- patch过程：Vue的diff过程会调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。通过比较这些节点，Vue会生成一个最小化的DOM更新操作集，然后应用这些操作到真实DOM上。
- 节点复用：当Vue发现新旧虚拟DOM中的
节点相同时（通过key属性判断），它会复用已有的DOM节点，而不是销毁旧的节点重新创建。 - key的匹配规则：在Vue中，如果新旧节点的key相同，Vue会认为这是同一个节点，并复用该节点；若key不同，则认为这是一个新节点，旧节点会被销毁，新节点会被创建。
- 列表对比：Vue的列表对比采用的是两端到中间比对的方式。例如，当一个集合只是把最后一个节点移到了第一个时，
Vue只会把最后一个节点移到第一个位置，而不需要像React那样依次移动前面的节点。
性能优化：
-
React
- Fiber架构：React引入了Fiber架构，可以将渲染工作分成多个阶段，这有助于在浏览器有时间处理其他任务时进行渲染，从而提高应用的响应性。
- shouldComponentUpdate：用户可以通过shouldComponentUpdate()方法来判断组件是否需要重新渲染，从而避免不必要的渲染操作。
-
Vue
- 队列批处理：Vue使用了一个队列来批处理节点的更新，这有助于减少DOM操作的次数，从而提高性能。
- patch策略：Vue对不同类型的节点采用不同的patch策略，这进一步提高了渲染效率。
总结:
vue和react没有谁好，谁不好，你适合用哪个就用哪个；相对来说， react更适合大型、数据复杂的应用；因为react 更灵活，单项数据流可控； vue简单方便，双向数据绑定；学习曲线比较平缓； vue是为了提高开发效率而生；react是为了颠覆前端开发流程而生；他们的diff算法也有所不同；react 不一样就重新挂载；key的作用在react中更重要一些；vue 是就地复用
面试题：
使用虚拟dom一定比操作真实dom快吗？
不一定 ，取决于具体的应用场景
使用虚拟dom更快的场景：
- 复杂UI 频繁更新，虚拟dom可以对多次数据进行整合，批量计算出最小的真实dom变更，减少重排重绘，提高性能；
- 组件化开发：变化时只影响该组件的虚拟dom树，精准更新对应真实dom，局部更新，提高性能；
直接操作真实dom更快的场景：
- 简单页面少量操作：因为虚拟dom创建和对比也是有开销的
- 精细控制dom操作：频繁操作同一dom元素的属性
