第1章 Web前端發(fā)展與Vue3簡介

第1章

Web前端發(fā)發(fā)展與Vue3簡介1.1Web前端發(fā)展歷史1990年Web系統(tǒng)誕生1995年JavaScript誕生1993-1994瀏覽器革命與標準化蒂姆·伯納斯-李在NeXT計算機上部署首個完整Web系統(tǒng),確立瀏覽器/服務器(B/S)架構(gòu)基礎模型,標志著前端工程的起點Mosaic圖形瀏覽器推動萬維網(wǎng)成為主流互聯(lián)網(wǎng)協(xié)議,NetscapeNavigator借多線程加載占領75%市場份額,W3C聯(lián)盟成立,開啟Web技術標準化進程網(wǎng)景與Sun聯(lián)合發(fā)布JavaScript,集成至Navigator2.0,作為"膠水語言"打通頁面組件間通信壁壘,支持非專業(yè)開發(fā)者通過腳本實現(xiàn)基礎交互1.1.1Web前端誕生與發(fā)展1.1.2

動態(tài)網(wǎng)頁技術一SSR與服務端渲染三大技術陣營SSR技術原理服務器執(zhí)行模板中的動態(tài)指令,將變量替換為實際數(shù)據(jù)后輸出完整HTML至瀏覽器開源社區(qū)主導,跨平臺部署與開發(fā)敏捷性見長PHP網(wǎng)頁內(nèi)容更新依賴整頁重載Java企業(yè)生態(tài),側(cè)重安全性與擴展性JSP形成"后端構(gòu)建頁面,前端負責展示"的協(xié)作范式網(wǎng)頁模板+動態(tài)數(shù)據(jù)→服務器微軟體系深度集成ASP瀏覽器SSR首次實現(xiàn)數(shù)據(jù)庫驅(qū)動內(nèi)容的實時更新,推動電商與社交網(wǎng)絡爆發(fā)前后端耦合的三大核心問題溝通成本高昂開發(fā)效率低下調(diào)試復雜度劇增前端制作靜態(tài)HTML模板后需移交后端嵌入PHP/JSP等動態(tài)腳本界面微調(diào)需前后端同步修改代碼頁面問題需跨職能協(xié)同定位根源前端無法獨立完成頁面調(diào)整前端無法單獨排查渲染邏輯異常模板移交需反復確認數(shù)據(jù)綁定接口跨團隊聯(lián)調(diào)耗時,協(xié)作效率受限任何UI變更都依賴后端配合發(fā)布問題復現(xiàn)與定位鏈路長1.1.2

動態(tài)網(wǎng)頁技術1.1.3

前端框架演進與技術范式迭代Ajax(2005年)jQuery(2006年)基于XMLHttpRequest實現(xiàn)異步數(shù)據(jù)請求,瀏覽器無刷新更新核心影響一:催生富客戶端應用(RIA),Gmail和GoogleMaps證明前端可獨立處理復雜交互核心影響二:推動前后端職責分離,后端專注提供API接口,前端負責交互邏輯與數(shù)據(jù)渲染貢獻:鏈式調(diào)用語法大幅簡化DOM操作貢獻:統(tǒng)一跨瀏覽器兼容方案,覆蓋IE6至IE9兼容問題局限:缺乏數(shù)據(jù)驅(qū)動視圖機制,大型項目易陷入"回調(diào)地獄"MVC框架的第一次范式革命(2010-2011)核心創(chuàng)新關鍵缺陷框架Backbone.js(2010年)模型-視圖數(shù)據(jù)綁定需手動更新DOMAngularJS(2010年)雙向數(shù)據(jù)綁定與依賴注入臟檢查機制導致性能瓶頸Ember.js(2011年)采用"約定優(yōu)于配置"范式學習曲線陡峭系統(tǒng)化引入桌面開發(fā)理念,但未徹底解決視圖層性能與開發(fā)體驗問題1.1.3

前端框架演進與技術范式迭代三足鼎立的現(xiàn)代框架(2013年至今)React(2013年)Vue(2014年)Angular(2016年重構(gòu))虛擬DOM(VirtualDOM)實現(xiàn)高效視圖更新組件化與單向數(shù)據(jù)流實現(xiàn)架構(gòu)優(yōu)化函數(shù)式組件與Hooks實現(xiàn)邏輯復用漸進式響應式數(shù)據(jù)綁定基于TypeScript的強類型體系組合式API(CompositionAPI)依賴注入與RxJS實現(xiàn)響應式編程解決邏輯組合問題三大框架采用不同技術手段,大幅提升視圖層性能,奠定現(xiàn)代前端格局1.1.3

前端框架演進與技術范式迭代1.2.1

Vue3框架簡介漸進式框架理念分層結(jié)構(gòu)Vue3是基于MVVM模式的漸進式JavaScript框架由內(nèi)到外四層同心結(jié)構(gòu):視圖渲染一最內(nèi)層基礎能力將框架進行分層設計,每一層可單獨實現(xiàn)并替換根據(jù)項目復雜度靈活選擇不同層次和功能組件機制一組件化開發(fā)支持簡單系統(tǒng):采用聲明式渲染機制路由機制一前端路由管理復雜系統(tǒng):接入組件系統(tǒng)、Vue-router路由、Vuex狀態(tài)管理狀態(tài)管理一多組件狀態(tài)共享什么是Vue3八大改進性能提升:體積更小:多節(jié)點支持:CompositionAPl:替代Mixin,靈活復用代碼且支持類型推斷重新設計虛擬DOM,優(yōu)化模板編譯,改進組件初始化速度對引入進行"剪枝",未使用的引用不打包進項目組件模板不再需要唯一根節(jié)點,可含多個節(jié)點Suspense組件:TypeScript支持:靈活渲染:自定義渲染API:完全采用TS編寫,無兼容性問題,類型檢善可將子節(jié)點渲染到父組件以外的DOM節(jié)點等待異步組件解析時支持開發(fā)者方便地進行自定義渲染器開發(fā)顯示后備內(nèi)容1.2.1

Vue3框架簡介1.2.2

Vue3的優(yōu)勢體積較小壓縮后僅33KB,輕量高效,加載速度快基于虛擬DOM通過預先計算優(yōu)化DOM操作,避免直接操作DOM對象,運行效率更高雙向數(shù)據(jù)綁定3開發(fā)人員無需直接操作DOM,可將更多精力投入業(yè)務邏輯生態(tài)豐富初學者友好5易于入門,學習成本較低,提供大量學習資料存在許多成熟穩(wěn)定的基于Vue3的UI框架和組件,可快速實現(xiàn)開發(fā)輕量、高效、易學-Vue3是構(gòu)建用戶界面的理想選擇1.4配置Node.js環(huán)境1.3選擇IDENode.js是開源跨平臺的JavaScript運行時環(huán)境VSCode:微軟推出的輕量級代碼編輯器,免費開源含內(nèi)置模塊,可脫離Apache或IIS作為獨立服務器執(zhí)行下載:官網(wǎng)選擇與操作系統(tǒng)匹配的安裝包支持語法高亮、智能補全、代碼片段、GIT等特性跨平臺支持Windows、macOS及Linux推薦選擇LTS長期支持版,經(jīng)企業(yè)級驗證適合生產(chǎn)環(huán)境安裝步驟:官網(wǎng)下載安裝包→安裝簡體中文語言包安裝Vetur插件:驗證安裝:執(zhí)行node-v查看node版本,npm-v查看npm版本實現(xiàn)Vue3語法高亮,支持自動完成與診斷錯誤VSCode+Vetur插件+Node.js