Vue2核心知识点巩固+Vue2与Vue3全方位对比（超详细面试/学习笔记）

本文将系统性梳理Vue2核心基础知识点涵盖Options API组件通信、响应式原理、Vuex状态管理、Vue CLI工程化配置等核心内容同时从响应式原理、语法API、状态管理、路由、构建工具、新特性等多个维度全面对比Vue2与Vue3的核心差异适合前端开发者巩固基础、面试复盘与技术进阶。一、Vue2 Options API 与组件通信Options API是Vue2的默认语法规范通过data、methods、computed、watch等固定配置项组织代码结构规整、上手简单是Vue2项目的核心开发模式。而组件通信是Vue项目开发的核心基础Vue2提供了多种组件通信方案适配不同业务场景。1. 核心组件通信方式详解1Props 父传子这是Vue2中最基础、最常用的父组件向子组件传值的方式适用于父子组件常规数据传递场景耦合度低、规范性强。使用规则父组件通过动态属性绑定传递数据子组件通过props选项接收数据同时可定义数据类型、默认值、校验规则保证数据合法性子组件可直接在模板中渲染使用。核心流程父组件给子组件标签绑定动态属性 → 子组件props接收并校验 → 子组件直接渲染使用。代码示例父组件template div !-- 动态绑定属性传值 -- Child :msgparentMsg :listlist / /div /template script import Child from ./Child.vue export default { components: { Child }, data() { return { parentMsg: 父组件传递的内容, list: [1, 2, 3] } } } /script子组件template div p{{ msg }}/p p{{ list }}/p /div /template script export default { // 接收并校验数据 props: { msg: { type: String, default: }, list: { type: Array, default: () [] } } } /script2$emit 子传父用于子组件向父组件传递事件或数据是父子反向通信的标准方案适用于子组件触发操作、向父组件同步状态/数据的场景。使用规则子组件通过this.$emit(自定义事件名, 传递数据)触发自定义事件并携带参数父组件在子组件标签上绑定对应自定义事件通过事件回调函数接收子组件传递的数据。核心流程子组件触发业务事件 → $emit发送自定义事件与数据 → 父组件绑定对应事件接收并处理数据。代码示例子组件template button clicksendData向父组件传值/button /template script export default { methods: { sendData() { // 第一个参数自定义事件名第二个参数传递的数据 this.$emit(child-send, 子组件数据, 666) } } } /script父组件template div !-- 绑定子组件自定义事件 -- Child child-sendhandleChildData / /div /template script import Child from ./Child.vue export default { components: { Child }, methods: { // 接收子组件传递的所有参数 handleChildData(str, num) { console.log(str, num) // 子组件数据 666 } } } /script3$parent / $children 实例访问该方式可直接访问父子组件的组件实例this.$parent用于子组件访问父组件实例this.$children返回当前组件的所有子组件实例数组可通过下标获取指定子组件实例。注意事项该方式耦合度极高组件层级变动会直接导致代码失效可读性和可维护性差业务开发中不推荐使用仅适用于极少数特殊场景。代码示例// 子组件访问父组件实例 console.log(this.$parent) // 父组件访问第一个子组件实例 console.log(this.$children[0]) // 遍历所有子组件 this.$children.forEach(child { console.log(child) })2. $refs 直接操作子组件与DOM$refs是Vue2提供的快速获取DOM元素或子组件实例的API核心作用是直接调用子组件方法、访问子组件数据或操作原生DOM节点。使用方式给目标DOM元素或子组件标签添加ref自定义属性之后在组件中通过this.$refs.属性名即可访问对应DOM或组件实例。核心注意点该属性仅在组件mounted挂载完成后可访问挂载前获取值为undefined同时需避免过度使用$refs会破坏组件封装性优先使用Props、$emit规范通信方案。代码示例template div !-- DOM绑定ref -- div refboxDom我是DOM节点/div !-- 子组件绑定ref -- Child refchildComp / /div /template script import Child from ./Child.vue export default { components: { Child }, mounted() { // 获取DOM元素 console.log(this.$refs.boxDom) // 获取子组件实例可直接调用子组件方法/数据 console.log(this.$refs.childComp) this.$refs.childComp.childMethod() } } /script3. 混入mixin的用途与核心陷阱mixin是Vue2中实现逻辑复用的重要方案核心用途是抽离多个组件通用的data数据、methods方法、生命周期逻辑等公共配置将重复逻辑统一封装实现代码复用减少冗余代码。但mixin存在明显缺陷也是项目维护的重大隐患核心陷阱如下第一存在命名冲突问题。当组件与mixin、多个mixin之间存在同名data、方法或生命周期配置时会发生覆盖优先级为组件自身配置 mixin配置且后引入的mixin会覆盖先引入的mixin。第二逻辑隐式依赖严重。mixin与组件、多个mixin之间容易产生隐性依赖代码逻辑分散开发者难以快速梳理逻辑关联。第三调试追溯困难。复杂项目中大量使用mixin会导致逻辑碎片化报错时难以快速定位逻辑来源极大提升项目维护成本。因此在Vue3中官方推荐使用Composition API替代mixin实现逻辑复用彻底解决mixin的各类弊端。mixin代码示例新建mixin/common.jsexport default { data() { return { title: 公共标题 } }, methods: { commonFunc() { console.log(公共复用方法) } }, mounted() { console.log(mixin生命周期执行) } }组件中引入使用template div{{ title }}/div /template script import commonMixin from /mixin/common.js export default { mixins: [commonMixin], mounted() { this.commonFunc() } } /script二、Vue2响应式原理核心要点Vue2的响应式核心基于Object.defineProperty实现核心原理是遍历组件data中已定义的对象属性逐个劫持属性的getter和setter方法在数据读取时收集依赖、数据修改时触发视图更新从而实现数据驱动视图的效果。但该底层机制存在无法规避的局限性也是Vue2响应式的核心痛点1. 无法监听对象新增、删除的属性新增/删除属性无法触发视图更新需要手动调用Vue.set或this.$set实现响应式更新2. 无法监听数组下标直接修改、数组length直接赋值的操作Vue2只能通过重写push、pop、shift、unshift、splice、sort、reverse这7个数组变异方法实现数组数据的响应式监听3. 初始化性能开销大组件初始化时会递归遍历所有嵌套对象对所有层级属性逐一劫持深层嵌套数据会大幅增加初始化耗时。Vue2响应式 $set 解决缺陷代码示例script export default { data() { return { user: { name: 张三 }, arr: [1, 2, 3] } }, mounted() { // 1. 直接新增属性无法响应式更新 this.user.age 18 // 使用 $set 新增属性触发视图更新 this.$set(this.user, age, 18) // 2. 直接修改数组下标无法更新视图 this.arr[0] 99 // 使用 $set / 数组变异方法 更新 this.$set(this.arr, 0, 99) // this.arr.splice(0, 1, 99) } } /script三、Vuex状态管理与Vue CLI工程化一Vuex状态管理核心Vuex是Vue2官方配套的全局状态管理仓库核心作用是统一管理项目公共数据实现跨组件、多层级组件的数据共享规避多层组件嵌套传值的繁琐问题让所有组件可统一存取公共数据。1. Vuex四大核心要素State公共数据存储容器等同于组件中的data用于存放全局共享的基础数据Getter状态计算属性等同于组件中的computed用于对State原始数据进行二次加工、过滤、计算返回派生状态且具备缓存特性Mutation唯一可修改State数据的入口仅支持同步操作保证数据修改流程可追溯、可监控Action用于处理异步逻辑接口请求、延时操作等异步场景均放在Action中自身不能直接修改State数据需通过commit调用Mutation完成数据更新。Vuex 四要素完整代码示例store/index.jsimport Vue from vue import Vuex from vuex Vue.use(Vuex) export default new Vuex.Store({ // 数据源 state: { token: , userName: }, // 计算属性 getters: { getUserName(state) { return state.userName || 游客 } }, // 同步修改state mutations: { SET_TOKEN(state, val) { state.token val }, SET_NAME(state, val) { state.userName val } }, // 异步操作 actions: { // 模拟接口异步获取数据 async getUserInfo({ commit }) { const res await new Promise(resolve { setTimeout(() resolve(admin-token), 500) }) commit(SET_TOKEN, res) } } })2. 模块化、命名空间与简化语法大型项目中所有数据统一放在根Store会导致代码臃肿、维护困难因此Vuex支持模块化modules拆分通过拆分多个功能子模块将不同业务的状态独立管理index.js作为Store主入口统一引入并挂载所有子模块。为解决模块间命名冲突问题可开启namespaced: true命名空间为每个子模块创建独立作用域隔离模块内的state、mutation、action彻底避免全局命名冲突。同时Vuex提供mapState、mapActions等辅助函数通过ES6展开运算符快速将仓库数据、方法映射到组件中简化编码写法无需重复书写$store.state、$store.dispatch等冗余代码。模块化 命名空间 map辅助函数 示例模块文件store/modules/user.jsexport default { namespaced: true, // 开启命名空间 state: { userInfo: { name: } }, mutations: { UPDATE_NAME(state, name) { state.userInfo.name name } }, actions: { updateName({ commit }, name) { commit(UPDATE_NAME, name) } } }store入口引入模块import user from ./modules/user export default new Vuex.Store({ modules: { user } })组件中简化使用template div{{ userInfo.name }}/div /template script import { mapState, mapActions } from vuex export default { computed: { // 映射state数据 ...mapState(user, [userInfo]) }, methods: { // 映射actions方法 ...mapActions(user, [updateName]) }, mounted() { this.updateName(李四) } } /script3. Vuex数据持久化Vuex数据默认存储在内存中页面刷新后数据会丢失通过搭配localStorage实现数据持久化可让全局状态刷新页面后依然保留。核心实现方式为安装持久化插件在store入口文件配置对应参数实现Vuex数据自动同步至本地缓存。vuex-persistedstate 持久化代码示例安装依赖npm install vuex-persistedstate --saveimport Vue from vue import Vuex from vuex import persistedState from vuex-persistedstate Vue.use(Vuex) export default new Vuex.Store({ // ...state、mutations、actions、modules plugins: [ persistedState({ // 指定需要持久化的模块 paths: [user] }) ] })二Vue CLI工程化配置Vue CLI是Vue官方提供的脚手架工具核心作用是快速搭建标准化Vue项目内置webpack、babel、eslint等核心配置无需开发者手动从零配置工程化环境大幅提升项目搭建效率。其核心功能包括通过vue create my-app一键初始化项目、npm run serve启动带热更新的开发服务器、npm run build打包生成线上生产文件同时支持零配置开箱即用也可通过自定义配置文件拓展功能。1. 核心自定义配置vue.config.js别名alias配置自定义文件引入路径别名替代../../../../多层相对路径简化文件引入方式提升代码可读性proxy代理跨域配置配置本地开发代理解决前端请求后端接口的浏览器跨域问题适配本地开发环境接口联调开发服务器配置自定义端口、开启自动打开浏览器、配置热更新、关闭语法检查等开发环境参数。vue.config.js 完整常用配置示例const path require(path) module.exports { // 开发服务器配置 devServer: { port: 8080, open: true, hot: true, // 跨域代理 proxy: { /api: { target: http://localhost:3000, changeOrigin: true, pathRewrite: { ^/api: } } } }, // 关闭eslint lintOnSave: false, // 路径别名 configureWebpack: { resolve: { alias: { : path.resolve(__dirname, ./src), views: path.resolve(__dirname, ./src/views) } } } }2. ESLintPrettierHuskyGit工作流规范团队开发中统一代码质量与格式规范是项目维护的核心完整的工程化规范流程为创建项目→安装核心依赖→配置ESLint→配置Prettier→配置VSCode自动化→配置Huskylint-staged→初始化Git仓库→业务开发。ESLint专注代码质量检查可检测语法错误、未使用变量、非法语法、Vue语法不规范等问题规避代码漏洞Prettier专注代码风格格式化统一单双引号、分号、缩进、换行、空格等代码样式保证团队代码风格统一冲突解决ESLint与Prettier默认规则存在冲突可安装eslint-config-prettier关闭ESLint格式相关规则安装eslint-plugin-prettier将Prettier规则纳入ESLint校验彻底解决规则冲突VSCode自动格式化配置.vscode/settings.json文件安装ESLint、Prettier插件实现保存代码自动格式化、自动修复语法问题lint-staged仅对Git暂存区的文件进行代码校验与格式化提升校验效率避免全量文件校验耗时过长Husky绑定Git钩子在执行git commit提交代码前自动触发代码校验不规范代码无法提交从源头统一团队代码规范。四、Vue2 与 Vue3 全方位核心对比1. 响应式原理对比Vue2基于 Object.defineProperty通过遍历劫持对象已有属性的get/set实现响应式存在诸多局限性无法监听对象新增/删除属性、无法监听数组下标和length修改、初始化递归遍历所有嵌套对象深层数据初始化性能差必须依赖$set解决部分响应式失效问题。Vue3基于 Proxy直接代理整个对象可拦截对象的读取、修改、新增、删除、数组索引变更、length修改等全部操作彻底解决Vue2的响应式痛点。核心优势天然支持所有数据变更场景无需$set懒加载依赖仅对被访问的属性收集依赖无需全量递归遍历项目初始化速度大幅提升支持delete、in等更多操作拦截响应式能力更全面。Vue2 defineProperty vs Vue3 Proxy 核心对比代码// Vue2 底层原理无法监听新增/删除、数组下标 function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { get() { return val }, set(newVal) { val newVal console.log(视图更新) } }) } // Vue3 底层原理全量拦截 const target { name: 张三 } const proxyObj new Proxy(target, { get(target, key) { return target[key] }, set(target, key, val) { target[key] val console.log(视图更新) return true }, deleteProperty(target, key) { delete target[key] console.log(删除触发更新) return true } }) proxyObj.age 18 // 新增属性可监听 delete proxyObj.name // 删除属性可监听2. Options API 与 Composition API 对比Vue2 Options API按代码类型拆分模块data、methods、computed、watch、生命周期钩子相互独立拆分编写。优点是结构规整、新手易上手缺点是同一业务逻辑的代码会分散在多个配置项中业务逻辑碎片化复用依赖mixin易出现命名冲突、逻辑溯源困难等问题大型项目维护成本极高。Vue3 Composition API以setup函数为入口是Vue3核心语法规范核心API包含ref、reactive、watch、watchEffect。ref用于处理数字、字符串、布尔等基本类型响应式数据修改需通过.valuereactive用于处理对象、数组等引用类型数据可直接修改属性watch 监听 reactive 整体对象时旧值无法保留只有监听基础数据、ref 数据、对象具体属性时才能正常获取新旧值watchEffect自动收集依赖依赖变更自动执行回调。核心优势按业务功能聚合代码同一业务的变量、方法、监听逻辑集中编写逻辑更清晰通过自定义Hooks实现逻辑复用彻底替代mixin无命名冲突、无隐式依赖原生对TypeScript友好类型推导精准适配大型项目开发。同时Vue3完全兼容Options API老项目可平滑升级过渡。Vue3 Composition API 核心代码示例template div p{{ count }}/p p{{ user.name }}/p /div /template script setup import { ref, reactive, watch, onMounted } from vue // 基本类型响应式 ref const count ref(0) count.value // 引用类型响应式 reactive const user reactive({ name: 张三, age: 20 }) user.name 李四 // 监听 watch(count, (newVal) { console.log(count变化了, newVal) }) // 生命周期 onMounted(() { console.log(组件挂载完成) }) /script3. 状态管理Vuex vs PiniaVuexVue2标配采用四层架构StateGetterMutationAction强制同步逻辑走Mutation、异步逻辑走Action代码层级繁琐、冗余代码多模块化存在嵌套命名空间配置复杂对TypeScript支持不友好类型推导不完善大型项目开发效率低。PiniaVue3官方推荐简化状态管理架构彻底移除Mutation同步、异步逻辑均可直接修改State大幅简化代码流程无嵌套命名空间每个Store都是独立模块引入即用、配置极简原生完美支持TypeScript类型提示完善、推导精准体积更小、API更简洁目前已逐步全面替代Vuex成为Vue3项目主流状态管理方案。Pinia极简代码示例stores/user.jsimport { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ name: 张三, token: }), getters: { getUsername(state) { return state.name } }, // 无需mutation直接同步/异步修改 actions: { setName(name) { this.name name }, async getToken() { const res await Promise.resolve(pinia-token) this.token res } } })组件使用script setup import { useUserStore } from /stores/user const userStore useUserStore() // 直接修改 userStore.setName(李四) await userStore.getToken() /script4. 路由Vue Router 3.x vs 4.xVue Router 3.x适配Vue2通过new VueRouter实例创建路由通过Vue.use()全局注册组件内可通过this.$route获取路由信息、this.$router执行路由跳转API简洁、适配Options API。Vue Router 3.xVue2示例import Vue from vue import VueRouter from vue-router import Home from /views/Home.vue Vue.use(VueRouter) const routes [ { path: /, name: Home, component: Home } ] const router new VueRouter({ routes }) export default routerVue Router 4.x适配Vue3采用函数式编程通过createRouter、createWebHistory工厂函数创建路由实例取消new实例方式通过app.use()挂载setup语法中无法使用this需手动引入useRoute、useRouter获取路由实例同时调整部分导航守卫参数格式移除废弃API适配Composition API开发模式。Vue Router 4.xVue3示例import { createRouter, createWebHistory } from vue-router import Home from /views/Home.vue const routes [ { path: /, name: Home, component: Home } ] const router createRouter({ history: createWebHistory(), routes }) export default router组件内使用script setup import { useRoute, useRouter } from vue-router const route useRoute() // 获取路由参数 const router useRouter() // 跳转方法 router.push(/) console.log(route.path) /script5. 构建工具Vue CLIWebpack vs ViteVue CLIWebpackVue2主流基于Webpack打包构建启动开发服务前需要全量打包所有源码项目体积越大冷启动速度、热更新速度越慢需要手动配置大量loader、plugin工程化配置繁琐开发体验较差。ViteVue3默认构建工具基于浏览器原生ES Moduleesbuild预构建依赖彻底颠覆Webpack打包逻辑。开发环境无需全量打包源码实现秒级冷启动热更新仅重新加载变更模块更新速度瞬时响应大型项目优势极其明显内置大量常用配置极简开箱即用大幅降低工程化配置成本。6. 生命周期钩子变更Vue3对Options API生命周期钩子名称做了部分语义化优化同时适配Composition API1. 卸载阶段钩子更名beforeDestroy → beforeUnmount、destroyed → unmounted语义更精准区分销毁与卸载2. Composition API中所有生命周期钩子均需从vue中按需导入在setup函数内部注册使用如onMounted、onUpdated、onBeforeUnmount、onUnmounted等3. beforeCreate、created、beforeMount、mounted等核心钩子名称保持不变。7. Vue3新增核心特性Fragment多根节点取消Vue2组件必须包裹唯一根节点的限制模板可直接编写多个并列根元素无需多余外层div包裹精简DOM结构Teleport传送门可将组件DOM渲染到指定目标节点如body脱离父组件层级、样式限制完美适配全局弹窗、悬浮层、遮罩层等场景v-model增强Vue2单个组件仅支持一个v-modelVue3支持多v-model绑定同时支持自定义修饰符数据双向绑定更灵活emits事件声明组件可通过emits选项显式声明自定义事件规范事件管理便于TS类型校验与代码提示除此之外Vue3还具备原生TS友好、打包体积更小、运行时性能更高、响应式更完善等全方位优势是目前Vue项目的主流开发版本。Vue3 新特性极简示例1. 多根节点 Fragmenttemplate div节点1/div p节点2/p /template2. Teleport 传送门template teleport tobody div classdialog全局弹窗/div /teleport /template3. 多 v-model 绑定Child v-model:titletitle v-model:contentcontent /五、总结Vue2的核心优势是生态成熟、语法简单适合新手入门和传统存量项目维护但存在响应式缺陷、代码复用局限、工程化性能不足等问题。Vue3从底层重构响应式原理升级Composition API、优化工程化工具、完善TS支持解决了Vue2的各类痛点在代码可维护性、运行性能、开发效率、大型项目适配性上全面超越Vue2。对于开发者而言巩固Vue2核心基础是前提掌握Vue2与Vue3的核心差异、熟练使用Vue3新语法与新特性是现阶段前端Vue技术栈进阶的核心重点。学习记录备注本文为个人Vue2Vue3系统性学习复盘整理全程结合实操代码与面试核心知识点汇总内容如有疏漏或不当之处欢迎各位大佬指正、交流学习