携手创作,一起生长!这是我参与「日新方案 8 月更文应战」的第1天,点击检查活动详情
前语
个人认为结构的初衷是带给开发者更好的开发体验,更快的功能,更简略的操作。
vue3和react18都是最新的结构版别,两者虽然底层原理和思想不同,但是更多的是相同之处,比方都是声明式的,一般多用于spa,都用hooks来逻辑复用等等
用vite初始化vue3和react18项目
pnpm create vite
然后删去无用的代码之后,再改形成同样功能的HelloWorld组件,这个组件做如下工作:
- 定义数据
count,点击按钮能够是count+1,页面也会响应式改动;
- 还有一个监听数据改动,在控制台打印改动的数据;
- 有一个数组
['apple', 'orange', 'pear'],用于列表渲染到页面。
接下来开端找不同,找差异,比照出vue和react的差异
不同点1:react运用更加灵敏
这儿vue3其实也支撑JSX,但是用的仍是比较少,所以也能够提一下
- 因为react运用
JSX能够当作变量,所以完全能够把模板中的代码的代码抽离出去 -
JSX还能够当作props传递,能够省略比方slot这样的概念 -
JSX是直接支撑TS的 - 对于
vue2来说,options api需求到固定方位写逻辑,也是没有react灵敏
不同点2:vue3更智能的依靠收集
-
vue3在模板中的数据能够被模板主动查询,而react需求手动调用
useState定义数据和修改数据的办法 -
vue3比方
watchEffect/computed是能够主动寻觅依靠的,而reac比方useEffect/useMemo/useCallBack的第二个参数数组需求写上依靠的数据
不同点3:vue3和react优化手法不同
-
vue是以组件为颗粒度的,能够精准的找到需求更新的当地,组件拆分细一点,就能够到达一定优化效果 - 而
react是比照差异来更新的,并且父组件更新,子组件默认也会更新,所以react更新手法一个办法就是浅比较,判断父组件更新的时分,子组件是否要更新,从而越过子组件更新
加上一点自己的了解,能够说vue是主动挡,react是手动挡
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。




