教程知識庫【免費下載鏈接】tech-interview-for-developer ?? ??? ?? ?? ?? ?? ???? 項目地址https://gitcode.com/GitHub_Trending/te/tech-interview-for-developer點擊查看免費下載本篇技術(shù)指南以倉庫中的 Web/Vue.js? React? ??.md 為骨架系統(tǒng)梳理 Vue.js 與 React 在開發(fā) CLI、樣式組織方式、數(shù)據(jù)更新機制三個維度上的核心差異并結(jié)合倉庫內(nèi) Vue 生命周期、React Hook、兩框架與 Spring Boot 集成等筆記進行縱深展開。讀完本文你可以直接掌握兩套框架在工程初始化、狀態(tài)變更寫法與響應式原理上的關(guān)鍵區(qū)別為技術(shù)面試中的框架對比題與真實項目選型建立清晰的回答脈絡。為什么面試與選型都要問 Vue.js 與 React 的差異Vue.js 與 React 是當前前端開發(fā)中使用最廣泛的兩大視圖層框架。在 README.md 所收錄的 Web 知識體系中本倉庫將 Vue.js vs React 作為獨立的知識點收錄見根 README 的 Web 目錄并在 Web/README.md 中把 Vue 的生命周期、Vue CLI Spring Boot 集成與 React 的 Hook、Fragment、Spring Boot 集成 等筆記分別歸檔。因此圍繞兩者差異展開的知識點實際上是理解兩大框架工程化與響應式設(shè)計的最佳切入點。原文檔主要從三個角度對比二者開發(fā) CLIvue-cli vs create-react-app、CSS 文件組織方式、數(shù)據(jù)變異data mutation機制。本文按此骨架逐節(jié)展開并補充倉庫內(nèi)的源碼級筆記佐證。一、開發(fā) CLIvue-cli 與 create-react-app原文檔指出兩框架分別擁有官方推薦的腳手架工具Vue.js使用vue-cliReact使用create-react-app1.1 Vue 側(cè)Vue CLI 的實際使用倉庫的 Web/Vue/Vue CLI Spring Boot ???? ?? ????.md 記錄了 Vue CLI 的完整初始化流程$ npm i -g vue/cli # 安裝 Vue CLI $ npm i -g vue/cli-init # 提供 vue init拉取 2.x 模板的兼容包 $ vue init webpack frontend # 在 Spring Boot 根目錄下創(chuàng)建名為 frontend 的 Vue 項目文檔同時說明vue init過程中會交互式詢問 Project name、Project description、Author 等元信息并讓開發(fā)者選擇 Vue build 模式standalone、是否安裝 vue-router、是否啟用 ESLintpreset 可選 Standard以及是否配置測試部分。腳手架完成后項目根目錄會生成一個獨立的frontend前端工程。值得注意的工程化細節(jié)Vue CLI 項目通過config/index.js中的build配置控制 webpack 打包輸出位置。在與 Spring Boot 集成時需要把輸出目錄指到src/main/resources/static使 Spring Boot 自動配置能直接識別index.html與 css、img、javascript 等靜態(tài)資源。這是腳手架初始化之外很容易踩坑的一步。1.2 React 側(cè)create-react-app 與手動 webpack 組合React 生態(tài)的官方初始化工具是create-react-app。倉庫的 Web/React/React Spring Boot ???? ?? ????.md 提到create-react-app 一次安裝即可完成依賴配置同時該文檔示范了不依賴 CRA 的手動搭建路線便于理解底層構(gòu)成$ npm init # 生成 package.json $ npm i react react-dom # 運行時依賴 $ npm i babel/core babel/preset-env babel/preset-react babel-loader css-loader style-loader webpack webpack-cli -D # 構(gòu)建依賴隨后通過webpack.config.js配置入口src/main/jsx、babel-loader 的 presetsbabel/preset-envbabel/preset-react以及 css/style loader并把打包產(chǎn)物輸出到src/main/webapp/js/react/[name].bundle.jsvar path require(path); module.exports { context: path.resolve(__dirname, src/main/jsx), entry: { main: ./MainPage.jsx, page1: ./Page1Page.jsx }, devtool: sourcemaps, cache: true, output: { path: __dirname, filename: ./src/main/webapp/js/react/[name].bundle.js }, mode: none, module: { rules: [ { test: /\.jsx?$/, exclude: /(node_modules)/, use: { loader: babel-loader, options: { presets: [ babel/preset-env, babel/preset-react ] } } }, { test: /\.css$/, use: [ style-loader, css-loader ] } ] } };開發(fā)時通過node_modules\.bin\webpack --watch -d開啟增量構(gòu)建-d為開發(fā)模式、-p為生產(chǎn)模式并可把start、watch命令注冊進package.json的scripts中簡化操作。1.3 小結(jié)維度Vue.jsReact官方腳手架vue-clicreate-react-app初始化方式vue init/vue create交互式生成npx create-react-app一條命令生成與 Spring Boot 集成webpack 輸出到src/main/resources/staticwebpack 輸出到src/main/webapp/js/react由 JSP 引用 bundle.js兩者都是模板 webpack 構(gòu)建思路區(qū)別在于 Vue CLI 把路由vue-router、狀態(tài)管理vuex、ESLint 等選項內(nèi)置到交互流程中React 手動方案則需要自行組合 webpack、babel preset-react 與 entry 配置。二、CSS 的組織方式組件內(nèi)樣式 vs 獨立樣式文件原文檔指出二者在樣式組織上的顯著差異Vue.js沒有獨立的 CSS 文件style直接在組件文件內(nèi)部定義React存在獨立的 CSS 文件通過文件方式應用樣式2.1 Vue 的單文件組件SFC模型Vue 采用單文件組件Single File Component組織代碼模板、邏輯與樣式同處一個.vue文件中template定義結(jié)構(gòu)、script定義邏輯、style定義樣式。這種樣式內(nèi)聚于組件的寫法讓組件自包含程度更高配合 scoped 樣式即可實現(xiàn)局部作用域隔離不需要額外管理全局 CSS 文件。2.2 React 的獨立樣式文件模型React 組件尤其是函數(shù)組件通常只包含 JS/JSX 邏輯樣式以獨立 CSS 文件存在并在 JSX 中通過import引入。倉庫的 React Spring Boot 集成文檔展示了這一模式頁面組件通過import ../webapp/css/custom.css;引入樣式文件再以className引用其中的樣式類import ../webapp/css/custom.css; import React from react; import ReactDOM from react-dom; class MainPage extends React.Component { render() { return div classNamemainno4gift ?? ???/div; } } ReactDOM.render(MainPage/, document.getElementById(root));對應的custom.css中以普通類選擇器定義樣式.main { font-size: 24px; border-bottom: solid 1px black; } .page1 { font-size: 14px; background-color: yellow; }文檔也強調(diào)CSS 應用方式并非只有 import 這一種CSS Modules、styled-components 等方案都屬于 React 生態(tài)的樣式擴展。需要說明的是這一差異描述的是兩框架的主流默認組織方式Vue 的 SFC 以style內(nèi)聯(lián)為主React 以獨立樣式文件為主二者并不絕對排斥其他方案。2.3 相關(guān)的結(jié)構(gòu)差異JSX 的單根節(jié)點約束React 的樣式與結(jié)構(gòu)差異還延伸到 JSX 語法約束上。倉庫的 Web/React/React Fragment.md 指出JSX 文件規(guī)則要求return時必須用一個標簽包裹所有元素。若把多個td塞進div返回會破壞table的合法 DOM 結(jié)構(gòu)div不能出現(xiàn)在tr內(nèi)。此時應使用Fragment或簡寫包裹因為 Fragment 不會在 DOM 樹中額外生成節(jié)點import { Component } from React class Columns extends Component { render() { return ( Fragment tdHello/td tdWorld/td /Fragment ); } }三、數(shù)據(jù)更新機制響應式自動更新 vs setState 顯式提交這是原文檔的核心對比點也是面試中的高頻考點。原文檔給出的對比// name: kim 的值要改成 lee // Vue.js : this.name lee // React : this.setState({name:lee})原文檔同時點明關(guān)鍵結(jié)論Vue 在更新 data 時會自動把 setState 式的更新邏輯依賴追蹤 重新渲染調(diào)度結(jié)合進去開發(fā)者無需手動觸發(fā)而 React 需要顯式調(diào)用setState。3.1 Vue 的響應式 dataVue 中數(shù)據(jù)必須掛在data對象上組件選項式寫法中才能成為響應式數(shù)據(jù)必須先創(chuàng)建 data 對象之后才能對 data 進行更新對data屬性直接賦值即可觸發(fā)視圖更新this.name lee框架內(nèi)部會為每個屬性建立依賴收集與派發(fā)更新的機制更新 data 時自動結(jié)合 setState 行為即賦值后自動完成重渲染調(diào)度。3.2 React 的 state 與 setStateReact 中組件狀態(tài)存放于state更新必須通過setState先創(chuàng)建 state 對象類組件this.state {...}函數(shù)組件useState初始化更新時比 Vue 多一步顯式提交this.setState({name:lee})setState是異步批處理的它通知 React 狀態(tài)已變更需要重新渲染不能直接通過賦值修改this.state來觸發(fā)更新。3.3 函數(shù)組件時代React Hook 的狀態(tài)寫法倉庫的 Web/React/React Hook.md 記錄了 React 16.8 引入 Hook 的動機類組件存在狀態(tài)邏輯難以復用、代碼復雜度上升、無關(guān)邏輯相互混雜三大痛點。Hook 讓函數(shù)組件也能擁有 state 與生命周期能力const [posts, setPosts] useState([]); // 解構(gòu)賦值() 內(nèi)為初始值狀態(tài)變更時調(diào)用以set命名的更新函數(shù)如setPosts(newPosts)這與類組件的setState一脈相承只是粒度更細。useEffect則在組件每次渲染后執(zhí)行副作用相當于類組件componentDidMount()與componentDidUpdate()的合體useEffect(() { console.log(??? ??); console.log(posts); });當posts變化觸發(fā)重渲染時useEffect會再次執(zhí)行?？梢?React 無論是類組件還是函數(shù)組件顯式觸發(fā)更新這一思想始終貫穿。3.4 延伸Vue 中的 computed 與 watchVue 在直接賦值之外還提供聲明式與命令式兩種數(shù)據(jù)派生手段倉庫的 Web/Vue/Vue.js ?????? ????.md 給出了完整示例// computed聲明式基于依賴自動緩存計算 new Vue({ el: #demo, data: { firstName: Foo, lastName: Bar }, computed: { fullName: function () { return this.firstName this.lastName } } })// watch命令式監(jiān)聽指定數(shù)據(jù)變化后執(zhí)行回調(diào) new Vue({ el: #demo, data: { firstName: Foo, lastName: Bar, fullName: Foo Bar }, watch: { firstName: function (val) { this.fullName val this.lastName }, lastName: function (val) { this.fullName this.firstName val } } })該文檔給出的選型結(jié)論非常實用computed 是聲明式、watch 是命令式watch 適合API 調(diào)用等異步結(jié)果返回前的中間狀態(tài)設(shè)置或耗時計算而大多數(shù)場景優(yōu)先使用聲明式的 computed。另外需要注意像Date.now()這種沒有響應式依賴的 computed 屬性不會自動更新——若每次調(diào)用都要拿到當前時間應改用 methods。四、生命周期與渲染模型的差異兩框架不僅更新寫法不同生命周期模型也各有側(cè)重這一節(jié)同樣來自倉庫的 Vue 生命周期筆記。4.1 Vue 的四階段生命周期Vue 生命周期分為四大階段Creation初始化、Mounting掛載、Updating更新、Destruction銷毀。Creation組件初始化階段所有鉤子最早執(zhí)行此時組件尚未插入 DOM且該階段鉤子在服務端渲染SSR中同樣受支持因此客戶端與服務端渲染都要做的事應放在此階段。beforeCreate最先執(zhí)行data 與事件尚未設(shè)置無法訪問createddata、事件已激活可訪問但模板與 virtual DOM 尚未掛載/渲染。MountingDOM 插入階段初始渲染前可訪問組件組件初期需要設(shè)置的數(shù)據(jù)更適合在created中處理。beforeMount模板或渲染函數(shù)編譯完成后、首次渲染發(fā)生前執(zhí)行使用頻率低mounted組件、模板、渲染后的 DOM 均可訪問所有畫面渲染完成后執(zhí)行。Updating響應式屬性變化或重新渲染時觸發(fā)可用于調(diào)試時感知組件何時被重渲染。beforeUpdate數(shù)據(jù)變更、更新周期啟動、DOM 重渲染與 patch 之前updated重新渲染完成后執(zhí)行可進行 DOM 依賴運算。Destruction解構(gòu)階段。beforeDestroy銷毀前調(diào)用適合移除事件監(jiān)聽器、解除 reactive subscriptiondestroyed銷毀后調(diào)用所有指令解綁、所有事件監(jiān)聽器移除。該筆記還特別提醒一個易錯點父子組件的mounted并非按直覺順序觸發(fā)父組件的mounted不會先于子組件執(zhí)行——父組件會等待子組件 mounted 鉤子結(jié)束。4.2 React 的生命周期與 Hook 對應React 傳統(tǒng)上以componentDidMount/componentDidUpdate/componentWillUnmount等類組件生命周期方法為主引入 Hook 后useEffect在函數(shù)組件中承擔了掛載與更新階段的副作用職責見上文 3.3 節(jié)。從面試角度可以這樣記憶Vue 把生命周期顯式劃分為四階段八鉤子React 則把掛載 更新收斂到useEffect銷毀邏輯通過useEffect返回的清理函數(shù)實現(xiàn)。五、SSR 生態(tài)對比Nuxt.js 與 Next.js原文檔雖未直接展開 SSR但兩框架的差異延伸到服務端渲染生態(tài)。倉庫的 Web/Nuxt.js.md 說明Vue 生態(tài)使用 NuxtReact 生態(tài)使用 Next兩者的目的都是在保留 SPA 體驗的同時解決 SEO 與首屏渲染問題。Nuxt.js 被定義為幫助 Vue.js 在服務器端渲染的開源框架可通過vue init nuxt/starter project-name快速初始化并內(nèi)置 vue-router、vuex 目錄結(jié)構(gòu)其價值在于普通 SPA 難以被搜索引擎收錄而 SSR 讓搜索機器人能直接抓取渲染后的頁面內(nèi)容從而兼顧 SEO 與 SPA 體驗倉庫的 Web/CSR SSR.md 進一步補充了兩者取舍CSR如典型 SPA流量低、無刷新、體驗接近原生應用但存在 SEO 短板如 React 網(wǎng)頁源碼在瀏覽器中查看時內(nèi)容為空依賴爬蟲執(zhí)行 JS 才能索引SSR 的優(yōu)勢是 SEO 友好與首屏加載性能提升代價是項目復雜度上升、服務器資源占用與潛在性能惡化。這一對比直接回應為什么 Vue/React 單頁應用還需要 Nuxt/Next 這類框架的面試追問。六、實戰(zhàn)兩框架與 Spring Boot 集成的工程差異原文檔的差異點在真實工程中體現(xiàn)得最明顯的是前后端如何銜接。6.1 Vue Spring Boot 集成路徑倉庫的 Web/Vue/Vue CLI Spring Boot ???? ?? ????.md 描述了完整流程通過 Spring Initializr 生成 Spring Boot 工程可預選 Web、JDBC、Lombok、MySQL 等依賴在 Spring Boot 根目錄下用 Vue CLI 創(chuàng)建frontend子工程修改config/index.js的 build 輸出路徑使 webpack 打包結(jié)果落入src/main/resources/static執(zhí)行npm run build靜態(tài)資源index.html、css、js即被 Spring Boot 自動配置識別若尚未配置數(shù)據(jù)源需在主類上排除DataSourceAutoConfiguration以避免啟動失敗package com.example.mvc; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration; SpringBootApplication EnableAutoConfiguration(exclude{DataSourceAutoConfiguration.class}) public class MvcApplication { public static void main(String[] args) { SpringApplication.run(MvcApplication.class, args); } }啟動后訪問localhost:8080/即可看到 Vue 渲染的頁面。6.2 React Spring Boot 集成路徑React 側(cè)的集成文檔Web/React/React Spring Boot ???? ?? ????.md則采用JSP 承載 bundle的方案在pom.xml中引入tomcat-embed-jasper與jstl依賴以支持 JSP/JSTL通過.\mvnw spring-boot:run啟動服務若遇 8080 端口被占用可用netstat -ao |find /i listening查 PID 后taskkill /f /im [pid]釋放端口編寫控制器把頁面名放入 ModelController public class MyController { GetMapping(/{name}.html) public String page(PathVariable String name, Model model) { model.addAttribute(pageName, name); return page; } }JSP 中聲明div idroot并引用對應 bundle 腳本script src/js/react/${pageName}.bundle.js/script由 React 在#root上完成掛載ReactDOM.render使用node_modules\.bin\webpack --watch -d持續(xù)監(jiān)聽 JSX 變更并增量打包。對比可見Vue 走構(gòu)建產(chǎn)物直接進 static 目錄由 Spring Boot 托管React 走JSP 頁面顯式引入 webpack 產(chǎn)物兩者的差異正源于各自腳手架的默認構(gòu)建輸出約定。七、總結(jié)與面試要點清單回到原文檔的核心結(jié)論可以提煉為以下面試回答要點腳手架Vue 官方 CLI 為 vue-cliReact 官方 CLI 為 create-react-app兩者本質(zhì)都是webpack 構(gòu)建 交互式初始化。樣式組織Vue 單文件組件中style內(nèi)聯(lián)定義樣式無獨立 CSS 文件React 以獨立 CSS 文件為主在 JSX 中import后通過className應用。數(shù)據(jù)更新Vue 中this.name lee直接賦值即可框架自動完成依賴追蹤與重渲染調(diào)度React 必須this.setState({name:lee})函數(shù)組件則調(diào)用useState返回的 setter顯式提交更新。響應式心智模型Vue 隱藏了賦值 → 通知 → 重渲染的流程React 要求開發(fā)者顯式聲明狀態(tài)要變并遵循不可變更新原則。延伸對比生命周期上 Vue 四階段八鉤子清晰可查React 以useEffect收斂副作用SSR 場景 Vue 對應 Nuxt、React 對應 Next與 Spring Boot 集成時前者產(chǎn)物進static、后者由 JSP 引用 bundle。若需繼續(xù)深入本主題可在倉庫中依次閱讀 Vue 生命周期筆記、React Hook 筆記、React Fragment 筆記、CSR SSR 對比 以及 Nuxt.js 說明并結(jié)合兩篇 Vue/Spring Boot、React/Spring Boot 集成實戰(zhàn)文檔形成完整閉環(huán)。贊分享教程知識庫【免費下載鏈接】tech-interview-for-developer ?? ??? ?? ?? ?? ?? ???? 項目地址https://gitcode.com/GitHub_Trending/te/tech-interview-for-developer點擊查看免費下載相關(guān)推薦為每個頁面添加 Favicon從檢查清單到完整實現(xiàn)的前端 SEO 指南為每個頁面添加 Favicon從檢查清單到完整實現(xiàn)的前端 SEO 指南 Favicon 是瀏覽器標簽頁、書簽和 Google 搜索結(jié)果中展示的小型站點圖標。本教程知識庫面試必問Array vs ArrayList vs LinkedList 深度對比tech-interview-for-developer 源碼解讀面試必問Array vs ArrayList vs LinkedList 深度對比tech interview for developer 源碼解讀 導讀教程知識庫PyPTO 上實現(xiàn) torch.masked_fill_ 的 kernel 參考骨架gt 掩碼 where 填充的 inplace 寫回方案PyPTO 上實現(xiàn) torch.masked_fill_ 的 kernel 參考骨架gt 掩碼 where 填充的 inplace 寫回方案 本文是 Py教程知識庫上一篇RIOT 的 cppcheck 靜態(tài)檢查實踐深入 dist/tools/cppcheck 包裝腳本下一篇pandoc 中 RST 解釋文本角色Interpreted Text Roles的往返轉(zhuǎn)換原理與實戰(zhàn)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考