一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。
大家好,我是大帅子,今天给大家讲一下vue跟react前端2大老铁之间的区别,下面我们直接开始吧
vue 跟 react 其实都是有一个词叫做响应式,但是这两个货的响应式的原理的完全不一样的
什么叫做响应式?
响应式就是数据(状态)驱动视图, (状态 --> 视图)
区别
vue就是自动挡, this.state.xxx= xxx , 所有就是真正的响应式 react就是手动挡 , this.setState({属性:新值})
vue: 就是通过 object.defineProperty ==> setter getter
react: setState(新值){//计算对比,更新UI } react的数据不可改 就是要通过 setState
obj = {a:1}
// obj.a = 2 //no
// obj = {...obj,a:2} // yes
vue的实现主要就是:数据劫持,发布定略
vue1 的时候 给每个元素添加 watcher ,没有虚拟DOM ,watcher 会直接操作DOM watcher本质上是一个回调函数
vue2 的时候给每个组件添加 watcher , watcher跟更新整个组件 ,同时引入了虚拟DOM (借鉴了react的虚拟DOM的做法) ,虚拟DOM就会提高性能
但是这个时候给每个对象添加一个响应式成本比较高,数组的元素修改和对象属性添加新属性无法监听 , 这个时候我们就需要用$set()
vue3 RFC机制,给vue的社区更加有活力 把 object.defineProperty() 换成了 proxy , 但是弊端也是有的 setup()里面每次都要写value 还要return出去
react的实现原理
react的里面的api很少,
react15 : 递归同步更新DOM 如果节点比较多,就会很慢,DOM的比较过程是不可中断的
react16 就是把一棵树变成一个链表,就是会快速的找到对应的节点,像链条一样,DOM的比较过程是可以中断的,让页面不在那么卡顿 (Fiber)
react17 其实就是一个过渡,稍纵即逝
react18 我本人还没开始用, 等之后用完一段时间给大家总结
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏,
🐣---->🦅 还需努力!大家一起进步!!!
