My Little World

各种框架框架的数据绑定机制

angular js

脏检查机制

react

虚拟DOM:react 在初始化的时候会render一颗dom树,当state/props发生改变的时候,render函数会再渲染出另外一棵树与之前的dom树进行对比,新渲染的树就是虚拟dom树
diff 算法:比较dom树时的算法,

只会对同层节点进行比较;
父节点不同,不会再去比较子节点;

同层比较时,遇到结点类型不同,比如结点顺序发生变化时
没有key属性的时候,自己以及自己以后的结点都会被删除,重新建;删除时,会卸载删除的结点以及以后的结点,再新建以后的结点
如果有key的话,则只会新增插入的结点,卸载被替换的结点 其他结点则只是update,不受影响;删除的话,只卸载删除的结点

遇到结点类型相同,
要去比较属性是否相同,如果不同,则只替换属性,只进行update

性能优化:避免不必要渲染
使用shouldComponentUpdate(),当这个方法返回true的时候,需要重新渲染,false的时候不需要(默认是true).
使用PureComponent组件,它会自动浅对比props/state,当两者相同的时候不渲染节点。
PureComponent只会浅比较,所以不适合用于深层嵌套的对象。
同时,PureComponent不仅仅会跳过自己的重新渲染,还会跳过它所有子节点的,所以要注意,用它的时候是最好没有子节点并且不依赖于global state的展示型组件。
reactlife

vue1.0

单检查

vue2.0

虚拟DOM和diff算法

vuelife

检测数据变更的4中方法

手动触发绑定
脏检查机制
数据对象劫持,使用Object.defineProperty
使用proxy

三大框架对比

1.数据检查更新原理不同
angularjs用脏检查
vue和react 使用diff算法
后两者效率更高

2.构建组件使用来说
angularjs更需要遵守框架规则,相对比较严谨
而vue次之,具备自己的响应式机制,所以要遵循一定的规则
最开放的是react,可以从更底层去定义自己想要的组件,
也可能跟react定位有关,一个用于构建UI的js库
它是一个库
库和框架的区别就是
库是,你调用库,作为开发者你有主动权
框架是你被框架调用,作为开发者你要听框架的
缺点就是数据改变自己要写监听逻辑

3.从使用场景上
angularjs和react都比较适合应用于大型网站开发
而vue小巧轻便,适合小项目开发

4.从学习成本上
vue最低,从用人角度来说最好找人
然后由于angular的规范严谨,导致需要学习的文档较多,
学习成本显而易见
react的开发角度相对以上两个框架更加向下,
有点像写早期模板语言,加上JSX语言的引入,
所以学习成本自然也是不低的