之前，自己一直覺得自己的vue 學的挺不錯的，但是經過一次面試後，發現自己接觸的只是vue 的冰山一角，很多思維，自己都侷限於 vue 的原本框架中，從未想過是否有其他的用法 or 優化，一直只會讓我如何用就如何用，並未主動去探尋如果換種思路又當如何？基於此，打算把vue 重學一遍。此目錄下的筆記，皆基於 vue 3.0。

　　學習一本技術離不開三段論。

是什麼？

　　vue  是一套用於 構建使用者介面的 漸進式框架。vue 的核心庫只關注檢視層。

為什麼？

　　百度了下，看了很多篇文章，無非就三點：元件，資料的雙向繫結和對檢視的操作。但是個人還是覺得下面這種描述最直觀，或者換句話說：

　　為什麼會有框架？

　　框架本身相當於一個工具，在前端開發中，無非就是想用最簡單的工具來解決一個複雜的問題。這就是一個框架存在的意義。

　　框架何其多，那為什麼要選擇用 vue？

　　個人覺得在實際開發中選用Vue很大一個因素就是：vue 上手容易，同時也具備其他框架的功能，換句話說是傻瓜式程式設計（此處並無貶低之意，只是這樣形容比較貼切易理解，也並非針對開發者）。

　　不過這只是個人理解，還是看看官網是如何說的。這裡直接就比較下各個框架之間的區別吧。

　　Vue & React 的相似之處：

• 使用虛擬 DOM (Virtual DOM)
• 提供了響應式（Reactive）和元件化（Composable）的試圖元件
• 將注意力集中保持在核心庫，而將其他功能如路由和全域性狀態管理交給相關的庫
• React 和 Vue 都很快

　　Vue & React 的不同之處：(未考慮 React 16+ 的分佈)

　　1、React 比 Vue 擁有更豐富的生態系統

　　2、元件的重新渲染（官網說的是“優化”）

　　React：

　　當某個元件的狀態發生變化時，它會以該元件為根，重新渲染整個元件子樹。

　　如要避免不必要的子元件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手動實現 shouldComponentUpdate 方法。同時可能需要使用不可變的資料結構來使得你的元件更容易被優化。

　　然而，使用 PureComponent 和 shouldComponentUpdate 時，需要保證該元件的整個子樹的渲染輸出都是由該元件的 props 所決定的。所以不符合這個情況，那麼此類優化就會導致難以察覺的渲染結果不一致。這使得 React 中的元件優化伴隨著相當的心智負擔。

（只用過react 兩個月的小白表示此處對於React的描述理解不了。之前自己用的時候，並不記得要使用 PureComponent 。希望懂React 的大神能幫忙解惑。）

　　在 Vue  應用中，元件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個元件確實需要被重渲染。你可以理解為每一個元件都已經自動獲得了 shouldComponentUpdate，並且沒有上述的子樹問題限制。

　　3、其他不再贅述，檢視官網：對比其他框架

其他相關快捷連結：

Vue 和 React 的區別