电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue和React有哪些區別

瀏覽:4日期:2022-11-22 17:40:40

一、監聽數據變化的實現原理不同

Vue通過 getter/setter以及一些函數的劫持,能精確知道數據變化 ,不需要特別的優化就能達到很好的性能 React默認是通過 比較引用 的方式進行的,如果不優化( pureComponent/shouldComponentUpdate )可能導致大量不必要的VDOM得重新渲染

為什么 React 不精確監聽數據變化呢 ?這是因為 Vue 和 React 設計理念上的區別, Vue 使用的是可變數據,而React更強調數據的不可變。 所以應該說沒有好壞之分,Vue更加簡單,而React構建大型應用的時候更加魯棒。

二、數據流的不同

Vue和React有哪些區別

大家都知道Vue中默認是支持雙向綁定的。在Vue1.0中我們可以實現兩種雙向綁定:

propsv-model 在 Vue2.x 中去掉了第一種, 也就是父子組件之間不能雙向綁定了(但是提供了一個語法糖自動幫你通過事件的方式修改),并且 Vue2.x 已經不鼓勵組件對自己的 props 進行任何修改了 。 然而 React從誕生之初就不支持雙向綁定,React一直提倡的是單向數據流,他稱之為 onChange/setState() 模式 。不過由于我們一般都會用 Vuex 以及 Redux 等單向數據流的狀態管理框架,因此很多時候我們感受不到這一點的區別了。

三、HOC和mixins

在Vue中我們組合不同功能的方式是通過mixin,而在React中我們通過HOC(高階組件)。React 最早也是使用 mixins 的,不過后來他們覺得這種方式對組件侵入太強會導致很多問題,就棄用了 mixinx 轉而使用 HoC,關于mixin究竟哪里不好,可以參考React官方的這篇文章 Mixins Considered Harmful。而 Vue 一直是使用 mixin 來實現的。

但是為什么Vue不采用HOC的方式來實現呢?

因為 高階組件本質就是高階函數,React的組件是一個純粹的函數,所以高階函數對React來說非常簡單 。但是Vue就不行了, Vue中組件是一個被包裝的函數,并不簡單的就是我們定義組件的時候傳入的對象或者函數 。比如我們定義的模板怎么被編譯的?比如聲明的props怎么接收到的?這些都是vue創建組件實例的時候隱式干的事。由于vue默默幫我們做了這么多事,所以我們自己如果直接把組件的聲明包裝一下,返回一個高階組件,那么這個被包裝的組件就無法正常工作了。

四、組件通信的區別

Vue和React有哪些區別

在Vue 中有三種方式可以實現組件通信:

父組件通過 props 向子組件傳遞數據或者回調,雖然可以傳遞回調,但是我們一般只傳數據,而通過 事件的機制來處理子組件向父組件的通信 子組件通過 事件 向父組件發送消息 通過 V2.2.0 中新增的 provide/inject 來實現父組件向子組件注入數據,可以跨越多個層級。

在React中,也有對應的三種方式:

父組件通過 props 可以向子組件傳遞數據或者回調 可以通過 context 進行跨層級的通信 ,這其實和 provide/inject 起到的作用差不多。

可以看到, React 本身并不支持自定義事件 ,Vue中子組件向父組件傳遞消息有兩種方式: 事件和回調函數,而且Vue更傾向于使用事件 。但是 在 React 中我們都是使用回調函數的 ,這可能是他們二者最大的區別。

五、渲染模版的不同

在表層上, 模板的語法不同

React是通過JSX渲染模版 而Vue是通過一種拓展的HTML語法進行渲染

但其實這只是表面現象,畢竟 React并不必須依賴JSX 。在深層上,模板的原理不同,這才是他們的本質區別:

React是在組件JS代碼中,通過 原生JS實現 模板中的常見語法,比如插值,條件,循環等,都是通過JS語法實現的 Vue是在和組件JS代碼分離的單獨的模板中, 通過指令來實現的 ,比如 條件語句就需要 v-if 來實現

react中 render函數是支持閉包特性的,所以我們import的組件在render中可以直接調用 。但是在Vue中, 由于模板中使用的數據都必須掛在 this 上進行一次中轉,所以我們import 一個組件完了之后,還需要在 components 中再聲明下,這樣顯然是很奇怪但又不得不這樣的做法。

六、Vuex和Redux的區別

從表面上來說, store 注入和使用方式有一些區別 。在 Vuex 中, $store 被直接注入到了組件實例中 ,因此可以比較靈活的使用:

使用dispatch和commit提交更新 通過mapState或者直接通過this.$store來讀取數據

在 Redux 中, 我們每一個組件都需要顯示的用 connect 把需要的 props 和 dispatch 連接起來。

另外 Vuex 更加靈活一些, 組件中既可以 dispatch action 也可以 commit updates ,而 Redux 中只能進行 dispatch,并不能直接調用 reducer 進行修改。

從實現原理上來說,最大的區別是兩點:

Redux 使用的是不可變數據,而Vuex的數據是可變的。 Redux每次都是用新的state替換舊的state,而Vuex是直接修改 Redux 在檢測數據變化的時候,是通過 diff 的方式比較差異的,而Vuex其實和Vue的原理一樣,是通過 getter/setter來比較的(如果看Vuex源碼會知道,其實他內部直接創建一個Vue實例用來跟蹤數據變化)

七、diff算法不同

兩者流程思維上是類似的,都是基于兩個假設(使得算法復雜度降為O(n)):

不同的組件產生不同的 DOM 結構。當type不相同時,對應DOM操作就是直接銷毀老的DOM,創建新的DOM。 同一層次的一組子節點,可以通過唯一的 key 區分。

但兩者源碼實現上有區別:

Vue基于snabbdom庫,它有較好的速度以及模塊機制。 Vue Diff使用雙向鏈表,邊對比,邊更新DOM 。 React主要使用 diff隊列保存需要更新哪些DOM,得到patch樹,再統一操作批量更新DOM。

Vue和React有哪些區別

八、事件機制不同

Vue

Vue原生事件使用 標準Web事件 Vue組件 自定義事件機制,是父子組件通信基礎 Vue合理利用了snabbdom庫的模塊插件

React

React原生事件被包裝,所有事件都冒泡到頂層document監聽,然后在這里合成事件下發 。基于這套,可以跨端使用事件機制,而不是和Web DOM強綁定。 React組件上無事件,父子組件通信使用props

以上就是Vue和React有哪些區別的詳細內容,更多關于Vue和React的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: YAGEO国巨电容|贴片电阻|电容价格|三星代理商-深圳市巨优电子有限公司 | 缓蚀除垢剂_循环水阻垢剂_反渗透锅炉阻垢剂_有机硫化物-郑州威大水处理材料有限公司 | 新型游乐设备,360大摆锤游乐设备「诚信厂家」-山东方鑫游乐设备 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 寮步纸箱厂_东莞纸箱厂 _东莞纸箱加工厂-东莞市寮步恒辉纸制品厂 | 电缆桥架生产厂家_槽式/梯式_热镀锌线槽_广东东莞雷正电气 | 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | 阁楼货架_阁楼平台_仓库仓储设备_重型货架_广州金铁牛货架厂 | 专业生物有机肥造粒机,粉状有机肥生产线,槽式翻堆机厂家-郑州华之强重工科技有限公司 | 云阳人才网_云阳招聘网_云阳人才市场_云阳人事人才网_云阳人家招聘网_云阳最新招聘信息 | 工控机-工业平板电脑-研华工控机-研越无风扇嵌入式box工控机 | 玖容气动液压设备有限公司-气液增压缸_压力机_增压机_铆接机_增压器 | 定制异形重型钢格栅板/钢格板_定做踏步板/排水沟盖板_钢格栅板批发厂家-河北圣墨金属制品有限公司 | 特种阀门-调节阀门-高温熔盐阀-镍合金截止阀-钛阀门-高温阀门-高性能蝶阀-蒙乃尔合金阀门-福建捷斯特阀门制造有限公司 | 塑胶跑道施工-硅pu篮球场施工-塑胶网球场建造-丙烯酸球场材料厂家-奥茵 | 样品瓶(色谱样品瓶)百科-浙江哈迈科技有限公司 | 医院专用门厂家报价-医用病房门尺寸大全-抗菌木门品牌推荐 | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 密封圈_泛塞封_格莱圈-[东莞市国昊密封圈科技有限公司]专注密封圈定制生产厂家 | 合肥办公室装修 - 合肥工装公司 - 天思装饰 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 七维官网-水性工业漆_轨道交通涂料_钢结构漆 | 真空包装机-诸城市坤泰食品机械有限公司 | 全自动包衣机-无菌分装隔离器-浙江迦南科技股份有限公司 | 螺杆真空泵_耐腐蚀螺杆真空泵_水环真空泵_真空机组_烟台真空泵-烟台斯凯威真空 | 仓储笼_仓储货架_南京货架_仓储货架厂家_南京货架价格低-南京一品仓储设备制造公司 | 热处理炉-退火炉-回火炉设备厂家-丹阳市电炉厂有限公司 | 钢制拖链生产厂家-全封闭钢制拖链-能源钢铝拖链-工程塑料拖链-河北汉洋机械制造有限公司 | 苹果售后维修点查询,苹果iPhone授权售后维修服务中心 – 修果网 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 飞歌臭氧发生器厂家_水处理臭氧发生器_十大臭氧消毒机品牌 | 北京浩云律师事务所-法律顾问_企业法务_律师顾问_公司顾问 | 非标压力容器_碳钢储罐_不锈钢_搪玻璃反应釜厂家-山东首丰智能环保装备有限公司 | 对辊破碎机_四辊破碎机_双齿辊破碎机_华盛铭重工 | 置顶式搅拌器-优莱博化学防爆冰箱-磁驱搅拌器-天津市布鲁克科技有限公司 | 水上浮桥-游艇码头-浮动码头-游船码头-码瑞纳游艇码头工程 | 工业用品一站式采购平台|南创工品汇-官网|广州南创 | 粉末包装机-给袋式包装机-全自动包装机-颗粒-液体-食品-酱腌菜包装机生产线【润立机械】 | 江苏远邦专注皮带秤,高精度皮带秤,电子皮带秤研发生产 | 避光流动池-带盖荧光比色皿-生化流动比色皿-宜兴市晶科光学仪器 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 三氯异氰尿酸-二氯-三氯-二氯异氰尿酸钠-优氯净-强氯精-消毒片-济南中北_优氯净厂家 |