教程知识库【免费下载链接】tech-interview-for-developer 신입 개발자 전공 지식 기술 면접 백과사전 项目地址https://gitcode.com/GitHub_Trending/te/tech-interview-for-developer点击查看免费下载本篇技术指南以仓库中的 Web/Vue.js와 React의 차이.md 为骨架系统梳理 Vue.js 与 React 在开发 CLI、样式组织方式、数据更新机制三个维度上的核心差异并结合仓库内 Vue 生命周期、React Hook、两框架与 Spring Boot 集成等笔记进行纵深展开。读完本文你可以直接掌握两套框架在工程初始化、状态变更写法与响应式原理上的关键区别为技术面试中的框架对比题与真实项目选型建立清晰的回答脉络。为什么面试与选型都要问 Vue.js 与 React 的差异Vue.js 与 React 是当前前端开发中使用最广泛的两大视图层框架。在 README.md 所收录的 Web 知识体系中本仓库将 Vue.js vs React 作为独立的知识点收录见根 README 的 Web 目录并在 Web/README.md 中把 Vue 的生命周期、Vue CLI Spring Boot 集成与 React 的 Hook、Fragment、Spring Boot 集成 等笔记分别归档。因此围绕两者差异展开的知识点实际上是理解两大框架工程化与响应式设计的最佳切入点。原文档主要从三个角度对比二者开发 CLIvue-cli vs create-react-app、CSS 文件组织方式、数据变异data mutation机制。本文按此骨架逐节展开并补充仓库内的源码级笔记佐证。一、开发 CLIvue-cli 与 create-react-app原文档指出两框架分别拥有官方推荐的脚手架工具Vue.js使用vue-cliReact使用create-react-app1.1 Vue 侧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 根目录下创建名为 frontend 的 Vue 项目文档同时说明vue init过程中会交互式询问 Project name、Project description、Author 等元信息并让开发者选择 Vue build 模式standalone、是否安装 vue-router、是否启用 ESLintpreset 可选 Standard以及是否配置测试部分。脚手架完成后项目根目录会生成一个独立的frontend前端工程。值得注意的工程化细节Vue CLI 项目通过config/index.js中的build配置控制 webpack 打包输出位置。在与 Spring Boot 集成时需要把输出目录指到src/main/resources/static使 Spring Boot 自动配置能直接识别index.html与 css、img、javascript 等静态资源。这是脚手架初始化之外很容易踩坑的一步。1.2 React 侧create-react-app 与手动 webpack 组合React 生态的官方初始化工具是create-react-app。仓库的 Web/React/React Spring Boot 연동하여 환경 구축하기.md 提到create-react-app 一次安装即可完成依赖配置同时该文档示范了不依赖 CRA 的手动搭建路线便于理解底层构成$ 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 # 构建依赖随后通过webpack.config.js配置入口src/main/jsx、babel-loader 的 presetsbabel/preset-envbabel/preset-react以及 css/style loader并把打包产物输出到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 ] } ] } };开发时通过node_modules\.bin\webpack --watch -d开启增量构建-d为开发模式、-p为生产模式并可把start、watch命令注册进package.json的scripts中简化操作。1.3 小结维度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 构建思路区别在于 Vue CLI 把路由vue-router、状态管理vuex、ESLint 等选项内置到交互流程中React 手动方案则需要自行组合 webpack、babel preset-react 与 entry 配置。二、CSS 的组织方式组件内样式 vs 独立样式文件原文档指出二者在样式组织上的显著差异Vue.js没有独立的 CSS 文件style直接在组件文件内部定义React存在独立的 CSS 文件通过文件方式应用样式2.1 Vue 的单文件组件SFC模型Vue 采用单文件组件Single File Component组织代码模板、逻辑与样式同处一个.vue文件中template定义结构、script定义逻辑、style定义样式。这种样式内聚于组件的写法让组件自包含程度更高配合 scoped 样式即可实现局部作用域隔离不需要额外管理全局 CSS 文件。2.2 React 的独立样式文件模型React 组件尤其是函数组件通常只包含 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; }文档也强调CSS 应用方式并非只有 import 这一种CSS Modules、styled-components 等方案都属于 React 生态的样式扩展。需要说明的是这一差异描述的是两框架的主流默认组织方式Vue 的 SFC 以style内联为主React 以独立样式文件为主二者并不绝对排斥其他方案。2.3 相关的结构差异JSX 的单根节点约束React 的样式与结构差异还延伸到 JSX 语法约束上。仓库的 Web/React/React Fragment.md 指出JSX 文件规则要求return时必须用一个标签包裹所有元素。若把多个td塞进div返回会破坏table的合法 DOM 结构div不能出现在tr内。此时应使用Fragment或简写包裹因为 Fragment 不会在 DOM 树中额外生成节点import { Component } from React class Columns extends Component { render() { return ( Fragment tdHello/td tdWorld/td /Fragment ); } }三、数据更新机制响应式自动更新 vs setState 显式提交这是原文档的核心对比点也是面试中的高频考点。原文档给出的对比// name: kim 的值要改成 lee // Vue.js : this.name lee // React : this.setState({name:lee})原文档同时点明关键结论Vue 在更新 data 时会自动把 setState 式的更新逻辑依赖追踪 重新渲染调度结合进去开发者无需手动触发而 React 需要显式调用setState。3.1 Vue 的响应式 dataVue 中数据必须挂在data对象上组件选项式写法中才能成为响应式数据必须先创建 data 对象之后才能对 data 进行更新对data属性直接赋值即可触发视图更新this.name lee框架内部会为每个属性建立依赖收集与派发更新的机制更新 data 时自动结合 setState 行为即赋值后自动完成重渲染调度。3.2 React 的 state 与 setStateReact 中组件状态存放于state更新必须通过setState先创建 state 对象类组件this.state {...}函数组件useState初始化更新时比 Vue 多一步显式提交this.setState({name:lee})setState是异步批处理的它通知 React 状态已变更需要重新渲染不能直接通过赋值修改this.state来触发更新。3.3 函数组件时代React Hook 的状态写法仓库的 Web/React/React Hook.md 记录了 React 16.8 引入 Hook 的动机类组件存在状态逻辑难以复用、代码复杂度上升、无关逻辑相互混杂三大痛点。Hook 让函数组件也能拥有 state 与生命周期能力const [posts, setPosts] useState([]); // 解构赋值() 内为初始值状态变更时调用以set命名的更新函数如setPosts(newPosts)这与类组件的setState一脉相承只是粒度更细。useEffect则在组件每次渲染后执行副作用相当于类组件componentDidMount()与componentDidUpdate()的合体useEffect(() { console.log(렌더링 완료); console.log(posts); });当posts变化触发重渲染时useEffect会再次执行。可见 React 无论是类组件还是函数组件显式触发更新这一思想始终贯穿。3.4 延伸Vue 中的 computed 与 watchVue 在直接赋值之外还提供声明式与命令式两种数据派生手段仓库的 Web/Vue/Vue.js 라이프사이클 이해하기.md 给出了完整示例// computed声明式基于依赖自动缓存计算 new Vue({ el: #demo, data: { firstName: Foo, lastName: Bar }, computed: { fullName: function () { return this.firstName this.lastName } } })// watch命令式监听指定数据变化后执行回调 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 } } })该文档给出的选型结论非常实用computed 是声明式、watch 是命令式watch 适合API 调用等异步结果返回前的中间状态设置或耗时计算而大多数场景优先使用声明式的 computed。另外需要注意像Date.now()这种没有响应式依赖的 computed 属性不会自动更新——若每次调用都要拿到当前时间应改用 methods。四、生命周期与渲染模型的差异两框架不仅更新写法不同生命周期模型也各有侧重这一节同样来自仓库的 Vue 生命周期笔记。4.1 Vue 的四阶段生命周期Vue 生命周期分为四大阶段Creation初始化、Mounting挂载、Updating更新、Destruction销毁。Creation组件初始化阶段所有钩子最早执行此时组件尚未插入 DOM且该阶段钩子在服务端渲染SSR中同样受支持因此客户端与服务端渲染都要做的事应放在此阶段。beforeCreate最先执行data 与事件尚未设置无法访问createddata、事件已激活可访问但模板与 virtual DOM 尚未挂载/渲染。MountingDOM 插入阶段初始渲染前可访问组件组件初期需要设置的数据更适合在created中处理。beforeMount模板或渲染函数编译完成后、首次渲染发生前执行使用频率低mounted组件、模板、渲染后的 DOM 均可访问所有画面渲染完成后执行。Updating响应式属性变化或重新渲染时触发可用于调试时感知组件何时被重渲染。beforeUpdate数据变更、更新周期启动、DOM 重渲染与 patch 之前updated重新渲染完成后执行可进行 DOM 依赖运算。Destruction解构阶段。beforeDestroy销毁前调用适合移除事件监听器、解除 reactive subscriptiondestroyed销毁后调用所有指令解绑、所有事件监听器移除。该笔记还特别提醒一个易错点父子组件的mounted并非按直觉顺序触发父组件的mounted不会先于子组件执行——父组件会等待子组件 mounted 钩子结束。4.2 React 的生命周期与 Hook 对应React 传统上以componentDidMount/componentDidUpdate/componentWillUnmount等类组件生命周期方法为主引入 Hook 后useEffect在函数组件中承担了挂载与更新阶段的副作用职责见上文 3.3 节。从面试角度可以这样记忆Vue 把生命周期显式划分为四阶段八钩子React 则把挂载 更新收敛到useEffect销毁逻辑通过useEffect返回的清理函数实现。五、SSR 生态对比Nuxt.js 与 Next.js原文档虽未直接展开 SSR但两框架的差异延伸到服务端渲染生态。仓库的 Web/Nuxt.js.md 说明Vue 生态使用 NuxtReact 生态使用 Next两者的目的都是在保留 SPA 体验的同时解决 SEO 与首屏渲染问题。Nuxt.js 被定义为帮助 Vue.js 在服务器端渲染的开源框架可通过vue init nuxt/starter project-name快速初始化并内置 vue-router、vuex 目录结构其价值在于普通 SPA 难以被搜索引擎收录而 SSR 让搜索机器人能直接抓取渲染后的页面内容从而兼顾 SEO 与 SPA 体验仓库的 Web/CSR SSR.md 进一步补充了两者取舍CSR如典型 SPA流量低、无刷新、体验接近原生应用但存在 SEO 短板如 React 网页源码在浏览器中查看时内容为空依赖爬虫执行 JS 才能索引SSR 的优势是 SEO 友好与首屏加载性能提升代价是项目复杂度上升、服务器资源占用与潜在性能恶化。这一对比直接回应为什么 Vue/React 单页应用还需要 Nuxt/Next 这类框架的面试追问。六、实战两框架与 Spring Boot 集成的工程差异原文档的差异点在真实工程中体现得最明显的是前后端如何衔接。6.1 Vue Spring Boot 集成路径仓库的 Web/Vue/Vue CLI Spring Boot 연동하여 환경 구축하기.md 描述了完整流程通过 Spring Initializr 生成 Spring Boot 工程可预选 Web、JDBC、Lombok、MySQL 等依赖在 Spring Boot 根目录下用 Vue CLI 创建frontend子工程修改config/index.js的 build 输出路径使 webpack 打包结果落入src/main/resources/static执行npm run build静态资源index.html、css、js即被 Spring Boot 自动配置识别若尚未配置数据源需在主类上排除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 侧的集成文档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持续监听 JSX 变更并增量打包。对比可见Vue 走构建产物直接进 static 目录由 Spring Boot 托管React 走JSP 页面显式引入 webpack 产物两者的差异正源于各自脚手架的默认构建输出约定。七、总结与面试要点清单回到原文档的核心结论可以提炼为以下面试回答要点脚手架Vue 官方 CLI 为 vue-cliReact 官方 CLI 为 create-react-app两者本质都是webpack 构建 交互式初始化。样式组织Vue 单文件组件中style内联定义样式无独立 CSS 文件React 以独立 CSS 文件为主在 JSX 中import后通过className应用。数据更新Vue 中this.name lee直接赋值即可框架自动完成依赖追踪与重渲染调度React 必须this.setState({name:lee})函数组件则调用useState返回的 setter显式提交更新。响应式心智模型Vue 隐藏了赋值 → 通知 → 重渲染的流程React 要求开发者显式声明状态要变并遵循不可变更新原则。延伸对比生命周期上 Vue 四阶段八钩子清晰可查React 以useEffect收敛副作用SSR 场景 Vue 对应 Nuxt、React 对应 Next与 Spring Boot 集成时前者产物进static、后者由 JSP 引用 bundle。若需继续深入本主题可在仓库中依次阅读 Vue 生命周期笔记、React Hook 笔记、React Fragment 笔记、CSR SSR 对比 以及 Nuxt.js 说明并结合两篇 Vue/Spring Boot、React/Spring Boot 集成实战文档形成完整闭环。赞分享教程知识库【免费下载链接】tech-interview-for-developer 신입 개발자 전공 지식 기술 면접 백과사전 项目地址https://gitcode.com/GitHub_Trending/te/tech-interview-for-developer点击查看免费下载相关推荐为每个页面添加 Favicon从检查清单到完整实现的前端 SEO 指南为每个页面添加 Favicon从检查清单到完整实现的前端 SEO 指南 Favicon 是浏览器标签页、书签和 Google 搜索结果中展示的小型站点图标。本教程知识库面试必问Array vs ArrayList vs LinkedList 深度对比tech-interview-for-developer 源码解读面试必问Array vs ArrayList vs LinkedList 深度对比tech interview for developer 源码解读 导读教程知识库PyPTO 上实现 torch.masked_fill_ 的 kernel 参考骨架gt 掩码 where 填充的 inplace 写回方案PyPTO 上实现 torch.masked_fill_ 的 kernel 参考骨架gt 掩码 where 填充的 inplace 写回方案 本文是 Py教程知识库上一篇RIOT 的 cppcheck 静态检查实践深入 dist/tools/cppcheck 包装脚本下一篇pandoc 中 RST 解释文本角色Interpreted Text Roles的往返转换原理与实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考