怎么才算學好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前端框架我到底學會了嗎？沒有！我才剛剛開始！千言萬語，其實，想跟小伙伴們說的是這樣四個字：“打好基礎”。怎么樣打好基礎？匯編原理、網絡工程、數據結構、基礎算法、開發模式等等，這些大學里看似無用的書中，會有你想要的答案的！

上一篇

長沙Java培訓：Java基礎通往高階進階篇

下一篇

千鋒長沙前端培訓：word-break和 word-wrap的區別