1.設(shè)計(jì)思想 vue的官網(wǎng)中說它是一款漸進(jìn)式框架，采用自底向上增量開發(fā)的設(shè)計(jì)。 react主張函數(shù)式編程本姥，所以推崇純組件，數(shù)據(jù)不可變杭棵，單向數(shù)據(jù)流婚惫，當(dāng)然需要雙向的地方也可以手動(dòng)實(shí)現(xiàn)， 比如借助 onChange 和 setState 來實(shí)現(xiàn)一個(gè)雙向的數(shù)據(jù)流魂爪。
2.編寫語法Vue推薦的做法是webpack+vue-loader的單文件組件格式先舷，vue保留了html、css甫窟、js分離的寫法React的開發(fā)者可能知道密浑，react是沒有模板的，直接就是一個(gè)渲染函數(shù)粗井，它中間返回的就是一個(gè)虛擬DOM樹尔破，React推薦的做法是JSX + inline style,也就是把HTML和CSS全都寫進(jìn)JavaScript了,即'all in js'。
3.構(gòu)建工具 vue提供了CLI 腳手架浇衬，可以幫助你非常容易地構(gòu)建項(xiàng)目懒构。 React 在這方面也提供了 create-react-app，但是現(xiàn)在還存在一些局限性耘擂，不能配置等等
4.數(shù)據(jù)綁定 vue是實(shí)現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架胆剧，當(dāng)視圖改變更新模型層，當(dāng)模型層改變更新視圖層。 在vue中秩霍，使用了雙向綁定技術(shù)篙悯，就是View的變化能實(shí)時(shí)讓Model發(fā)生變化，而Model的變化也能實(shí)時(shí)更新到View铃绒。 (這里我們可以繼續(xù)深入講解一下雙向數(shù)據(jù)綁定的原理鸽照，我之前的文章手寫Vue源碼可參考) react是單向數(shù)據(jù)流，react中屬性是不允許更改的颠悬，狀態(tài)是允許更改的矮燎。 react中組件不允許通過this.state這種方式直接更改組件的狀態(tài)。自身設(shè)置的狀態(tài)赔癌，可以通過setState來進(jìn)行更改诞外。 (注意：React中setState是異步的，導(dǎo)致獲取dom可能拿的還是之前的內(nèi)容灾票， 所以我們需要在setState第二個(gè)參數(shù)（回調(diào)函數(shù)）中獲取更新后的新的內(nèi)容峡谊。) 【這里如果你了解深入的話可以嘗試描述一下React中setState的異步操作是怎么實(shí)現(xiàn)的，Vue中的更新是通過微任務(wù)等】
5.diff算法vue中diff算法實(shí)現(xiàn)流程：
?1.在內(nèi)存中構(gòu)建虛擬dom樹
?2.將內(nèi)存中虛擬dom樹渲染成真實(shí)dom結(jié)構(gòu)?
3.數(shù)據(jù)改變的時(shí)候铝条，將之前的虛擬dom樹結(jié)合新的數(shù)據(jù)生成新的虛擬dom樹 4.將此次生成好的虛擬dom樹和上一次的虛擬dom樹進(jìn)行一次比對(duì)(diff算法進(jìn)行比對(duì))靖苇，來更新只需要被替換的DOM， 而不是全部重繪班缰。在Diff算法中贤壁，只平層的比較前后兩棵DOM樹的節(jié)點(diǎn)，沒有進(jìn)行深度的遍歷埠忘。?
5.會(huì)將對(duì)比出來的差異進(jìn)行重新渲染 react中diff算法實(shí)現(xiàn)流程: DOM結(jié)構(gòu)發(fā)生改變-----直接卸載并重新create DOM結(jié)構(gòu)一樣-----不會(huì)卸載,但是會(huì)update變化的內(nèi)容 所有同一層級(jí)的子節(jié)點(diǎn).他們都可以通過key來區(qū)分-----同時(shí)遵循1.2兩點(diǎn) (其實(shí)這個(gè)key的存在與否只會(huì)影響diff算法的復(fù)雜度,換言之,你不加key的情況下, diff算法就會(huì)以暴力的方式去根據(jù)一二的策略更新,但是你加了key,diff算法會(huì)引入一些另外的操作)React會(huì)逐個(gè)對(duì)節(jié)點(diǎn)進(jìn)行更新脾拆，轉(zhuǎn)換到目標(biāo)節(jié)點(diǎn)。而最后插入新的節(jié)點(diǎn)莹妒，涉及到的DOM操作非常多名船。diff總共就是移動(dòng)、刪除旨怠、增加三個(gè)操作渠驼，而如果給每個(gè)節(jié)點(diǎn)唯一的標(biāo)識(shí)（key），那么React優(yōu)先采用移動(dòng)的方式鉴腻，能夠找到正確的位置去插入新的節(jié)點(diǎn)迷扇。
vue會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹爽哎。而對(duì)于React而言,每當(dāng)應(yīng)用的狀態(tài)被改變時(shí),全部組件都會(huì)重新渲染,所以react中會(huì)需要shouldComponentUpdate這個(gè)生命周期函數(shù)方法來進(jìn)行控制蜓席。
