長沙Web前端培訓：怎麼才算學好Vue前端框架

       怎麼才算學好Vue前端框架？其實Vue.js定義是一個“資料驅動漸進式”框架，學習它的時候，其中很多東西都能讓我們眼前一亮，比如說資料雙向繫結、元件路由模組化、靈活的指令、全家桶等等。

       靈魂拷問一：“Vue2的本質是什麼？為什麼這麼多企業在業務中使用？”

       “明知故問，Vue2不就是一個資料驅動漸進式框架嗎？資料驅動你不懂？漸進式你不理解？全家桶你不會用？”沒錯，如果是當年的我內心是這樣反擊的！可是，實際上，今天我來說另外一種答案，小夥伴們來評判一下，這兩個答案有啥區別？

       首先，我想說的是，Vue其本質是一個『建構函式』（工廠函式？建構函式？不懂？基礎不牢地動山搖啊，小夥伴！）。當我們使用new關鍵字例項化出來一個Vue物件的時候（建構函式中new這個關鍵字都幹了啥？不知道？趕緊去看看吧，為啥這麼多面試題都會問到這個？），其原型、原型鏈上宣告的屬性和方法會根據物件導向程式設計思想（OOP不知道是啥？天啦，趕緊去學習基礎吧！~）傳入的引數，構建我們需要的物件，我們所有的操作，其本質上來講就是在操作這個物件的屬性改變和方法呼叫。

        為什麼我第一個問題要說這個Vue例項物件呢？首先，Vue的功能強大，作者設計思路之新穎全面，很多初學它的人會本能的覺得好像和原生的JavaScript沒有多大關係，其實不然，其本質就還是一個工廠建構函式例項化出來的物件，只不過是一個龐大了點的物件，這是n個人智慧結晶的積累。這裡面富含了大量的程式設計思維，還有紮實的理論功底，這也是我們前端工程師技術方向的終極道路：核心架構師，不過成長到這個地步的人，需要的不僅僅是學習，更需要有科研環境的團隊氛圍。

       靈魂拷問二：為什麼有了Vue3？Vue3在企業中什麼地方該用？什麼地方不該用？

       在回答這個問題之前，我先說到我們程式設計師基礎課中經常提到的兩個關鍵字：內聚、耦合！這是程式設計的規範，高內聚，低耦合！為什麼出現了Vue3？其實從本質上來講就是為了解決這個問題！那麼問題來了，Vue2的內聚哪裡低了？耦合哪裡高了？當然這裡我實在不想提到什麼Composition API、Options API，事實上，我已經提了！事實上，早在 Vue3 原始碼公佈之前，Vue 官方已經透露了代表下一代 Vue 技術的 Vue3 將採取的新的介面使用方式。這種新的方式叫做 Composition API （組合式 API）。而與之相對應的經典 API 也是我們所熟知的 Vue 使用方式叫做 Options API（選項式 API）或 Options-based API（基於選項的 API）。

       在經典的 Options API 中，我們使用一個具有 data, methods 等「選項」的 JS 物件來定義一個頁面或者元件。這種簡單直接的方式，在應用早期階段，程式碼和業務邏輯較簡單時，非常的友好親民，這也是 Vue 學習門檻較低而廣受開發者親暱的的一個因素。

       但是，有過開發大型 Vue 應用的開發者應該心有體會。當頁面的邏輯越來越多時，我們的元件將變得冗長複雜。很多本可以複用的邏輯和程式碼，你很難有一種使用起來非常舒適的方式來複用。比如：在 Vue2 中，元件邏輯和程式碼複用最常用的方式是混入mixin，這雖然是一種可行的方式，但是這種方式顯然從出生和 Vue 框架緊密耦合（看到了吧？這是不是高耦合了？反程式設計基礎規範了吧！）。當你想要將一個框架無區別的普通 JS 函式或者物件複用到 Vue2 開發的元件中時，你發現一切都是那麼的不優雅。 基於滿足在開發大型 Vue 應用中更優雅地複用已有程式碼的需求催生下，Vue3 Composition API 似乎是順勢而為，並且勢在必得。

       靈魂拷問三：TypeScript很不錯，你在專案中使用了多少？你覺得該不該用？

       TypeScript其本質上講核心是為了解決JavaScript程式語言弱型別這個問題而產生的，為了有效的解決程式變數在傳來傳去的過程中不嚴謹的問題！程式嘛，肯定要非常嚴謹才行啊！畢竟，我們們JavaScript語言現在熱門啊，是程式語言中的一哥啊！ 那麼，TypeScript是如何解決這個嚴謹的問題呢？兩個方面，官方也是這樣講的：TypeScript 本質上是向 JavaScript 語言新增了「可選的靜態型別」和「基於類的物件導向」程式設計，它相當於是JavaScript的超集。

       說實話，TypeScript 的官方文件非常非常適合前端開發者進階學習使用，這個非常有助於我們突破我們的技術壁壘，建議大家一定要細細研讀，不同階段的開發者研讀文件的感覺各有千秋，但都大有收穫。

       最後，來說說專案中使用TS，小兄弟啊！小專案，不復雜的專案，真的可以不用！都這樣內捲了，何必呢？！就為了一個最簡單的型別約束，show幾個新的語法特性，來幾個泛型程式設計，你要知道，為了解析你這個玩意，Node的Webpack會做多少工作？程式碼增加多少？真的，除非是資料嚴謹要求極高，專案業務邏輯極其複雜的專案，能不卷就不要捲了！

       靈魂拷問四：如果說一個專案，你如何精準的判斷得出來你到底該使用Vue2好呢？還是Vue3？還是React？或者是jQuery？甚至是原生JavaScript？

       看山是山，看水是水吧！不濃妝豔抹、東施效顰的做作！更不，不懂裝懂，自欺欺人的蠻幹！技術永遠是業務折中的解決方案，這個是真的！既然是折中的解決方案，核心就在於利弊權衡上！ 如果，這個站點對SEO有強關聯並且前後端很難分離，你非要使用什麼Vue or React，那就不對了！jQuery基於DOM程式設計一定是你的最佳選擇！

       如果是大型複雜專案，具有非常多的業務模組複用邏輯，並且資料通訊邏輯複雜，那麼你可以使用Vue3 or React Hooks，這個沒毛病，大量的業務模組被複用，又複用的不一樣，再不用這個玩意，團隊之間的程式碼強耦合，那就太難受了！單溝通成本就高的讓你瘋掉！

       原生JavaScript？Ok，如果你是涉及到最新的前沿課題，比如區塊鏈客戶端邏輯封裝，或者你在大廠的一個框架研究中心，你可以用，小打小鬧，還是小心為上 ！你真以為原生JavaScript很easy？沒有真正打通任督二脈的功力，走火入魔是常有的事情！

       Vue前端框架我到底學會了嗎？沒有！我才剛剛開始！千言萬語，其實，想跟小夥伴們說的是這樣四個字：“打好基礎”。怎麼樣打好基礎？彙編原理、網路工程、資料結構、基礎演算法、開發模式等等，這些大學裡看似無用的書中，會有你想要的答案的！