1.React和Vue的相爱相杀
组件化:
Vue:
通过 .vue
文件创建组件
template
创建组件结构
script
组件行为,数据,回调函数等等
style
样式
React:
React中也有组件化概念,但是并没有像Vue中的组件化模板文件,在React中,一切都是通过Js来表现的。
2.Dom和虚拟Dom
Dom是浏览器中通过js来表示的页面上的元素,所提供操作Dom的API
虚拟Dom是在使用框架的时候,我们用js对象来模拟页面上边的Dom和Dom的嵌套
通过虚拟Dom来实现对页面的高效更新
3.Diff算法
tree diff: 新旧两颗Dom逐层对比的过程,当整棵Dom树对比完成之后,所有需要按需更新的节点都会被找到
component diff: 在 Tree diff
的过程中,每一层的组件级别的对比,就是 component diff
- 对比前后,组件的类型相同,就暂时认为该组件不需要被更新
- 对比前后,组件的类型不同,则移除旧组件,创建新组件并且追加在页面上
element diff: 在进行组件级别对比的时候,如果两个组件相同,就会进行元素级别的对比,叫做 element diff