- 博客(35)
- 收藏
- 关注
RSS订阅原创 26、路由vue-router专题
Vue Router是Vue.js官方路由管理器，核心组件包括RouterView和RouterLink。Vue2和Vue3版本主要区别在于API引入方式（createRouter vs new Router）和组合式API支持。实现原理基于浏览器History API，通过监听URL变化匹配组件。页面跳转方式包括声明式导航、编程式导航和命名路由。$route包含当前路由信息，$router是路由实例。传参方式有params、query和props三种。懒加载通过动态import实现。导航钩子分为全局、路由
2025-12-29 10:05:35
450
原创 问题7：Router的导航钩子有哪些？说说导航守卫？并说明vue2和vue3的区别？
Vue Router导航守卫分为全局守卫（beforeEach、beforeResolve、afterEach）、路由独享守卫（beforeEnter）和组件内守卫（beforeRouteEnter/Update/Leave）。执行顺序遵循从组件离开到全局后置钩子的完整流程。Vue3改用Composition API（onBeforeRouteUpdate/Leave），取消强制next调用，支持返回值控制导航，并增强了TypeScript支持和动态路由管理。实际应用包括权限控制、路由懒加载优化等，需注意b
2025-12-29 10:04:55
460
原创 问题6：Router的懒加载是如何实现的？并说明vue2和vue3的区别？
本文系统介绍了Vue路由懒加载的实现原理与最佳实践。核心原理是利用ES6动态import()和Webpack代码分割实现按需加载。Vue2与Vue3都支持()=>import()语法，但Vue3新增defineAsyncComponent API，提供更完善的异步组件配置能力，包括加载状态、错误处理和超时重试等。最佳实践包括按功能模块分组打包、预加载关键路由、配合Suspense处理加载状态等。面试回答应分层次阐述概念、原理、框架差异和实践经验，避免笼统表述和概念混淆。
2025-12-29 10:04:15
279
原创 问题5：Router的传参方式有哪些，有什么区别？并说明vue2和vue3的区别？
Vue Router传参方式及最佳实践总结 Vue Router提供了四种主要传参方式： params动态路由传参（URL可见，SEO友好） query查询参数传参（适合筛选分页） props解耦传参（官方推荐，组件复用性高） state隐式传参（Vue3新增，适合敏感数据） Vue2与Vue3核心区别： API变化：组合式API替代this.$route Vue3移除了隐式params传参 新增history.state传参方式 更好的TypeScript支持 最佳实践： 优先使用props解耦传参 详情
2025-12-29 10:03:50
724
原创 问题4：$route和$router的区别是什么？并说明vue2和vue3的区别？
Vue路由核心概念对比：$route是只读的路由信息对象（包含路径、参数等），用于获取当前路由状态；$router是可操作的路由实例，提供push、replace等方法进行导航跳转。Vue2与Vue3主要差异体现在：1）响应式系统从Object.defineProperty升级为Proxy；2）API风格从Options API变为Composition API；3）生命周期钩子调整；4）更好的TypeScript支持。Vue3还优化了性能、支持多根节点，并引入了Teleport等新特性。面试时可结合项目经
2025-12-29 10:03:16
622
原创 问题3：请说出使用路由模块来实现页面跳转的三种方式？并说明vue2和vue3的区别？
本文详细介绍了VueRouter的三种页面跳转方式：声明式导航（<router-link>）、编程式导航（$router.push/replace/go）和直接操作URL（window.location）。重点对比了Vue2和Vue3在使用上的核心区别，包括获取路由实例的方式、router-link的差异、参数传递方法以及路由变化监听。特别强调Vue3中CompositionAPI的使用方式，并提供了从Vue2迁移到Vue3的具体建议。最后给出了面试回答模板和加分知识点，帮助开发者全面掌握Vue
2025-12-29 09:55:01
331
原创 问题2：请说说 vue-router 的实现原理？并说明vue2和vue3的区别？
VueRouter实现原理深度解析 VueRouter的核心原理可分为三大模块：路由模式、路由匹配和组件渲染。路由模式层通过Hash模式（监听hashchange）或History模式（利用HTML5 API）实现无刷新导航；路由匹配层将配置解析为映射表，支持动态参数匹配；组件渲染层通过RouterView动态渲染对应组件。 Vue2与Vue3实现差异显著：Vue2采用Class设计，通过defineReactive和mixin实现响应式；Vue3改用函数式编程，利用shallowRef和provide/i
2025-12-29 09:53:55
435
原创 问题1：vue-router 是什么？它有哪些组件？并说明vue2和vue3的区别？
VueRouter是Vue.js官方路由管理器，用于构建单页面应用(SPA)。核心组件包括导航组件router-link和路由出口router-view。Vue3(VueRouter4.x)相比Vue2(VueRouter3.x)有显著变化：创建方式改为createRouter()，路由模式配置更模块化，新增useRouter/useRoute组合式API，导航守卫简化了next()调用，通配符路由改为更明确的pathMatch语法。这些改进更好地支持TypeScript和组合式API。面试时可结合动态路由
2025-12-29 09:51:54
215
原创 25、Axios 原理详解与 Vue 中的封装实践
本文深入解析Axios二次封装的最佳实践。首先介绍Axios的核心特性，包括Promise API、拦截器机制等。重点分析其源码架构，包括请求处理流程、拦截器执行顺序等核心原理。针对实际开发痛点，提出完整的二次封装方案：包含统一配置管理、错误处理、请求取消、重试机制等关键功能，并给出模块化API管理示例。同时对比Vue2和Vue3的不同封装方式，特别推荐Vue3使用Composition API封装。最后提供面试回答框架，帮助开发者系统掌握Axios封装的核心要点。
2025-12-28 10:31:36
610
原创 24、Vue中的过滤器详解
本文介绍了Vue.js过滤器的核心概念和应用场景，对比了Vue2和Vue3中的差异，并提供了Vue3中的替代方案和迁移策略。过滤器在Vue2中主要用于文本格式化处理，如日期、金额、状态映射等，支持链式调用和参数传递。Vue3移除了过滤器功能，推荐使用methods、computed、全局属性或组合式函数替代。文章详细说明了每种替代方案的使用方法，并给出了从Vue2到Vue3的迁移步骤，包括识别过滤器、分类处理、模板更新等。最后提供了面试回答框架，帮助开发者深入理解过滤器特性及其演变。
2025-12-28 10:31:01
536
原创 23、详细说说什么是虚拟DOM？如何实现一个虚拟DOM？
虚拟DOM（Virtual DOM）是一种用JavaScript对象模拟真实DOM结构的技术方案，具有性能优化、跨平台能力和开发体验提升三大核心价值。其工作原理分为创建虚拟DOM、Diff算法对比差异和Patch更新真实DOM三个步骤。关键技术包括同层比较、类型判断和Key优化等策略。虽然虚拟DOM并非在所有场景下都比直接操作DOM快，但在复杂应用中能显著提升性能。现代框架如React和Vue在虚拟DOM基础上进行了不同方向的优化演进。面试时可采用STAR法则，从概念定义、核心价值、工作原理等维度展开回答，
2025-12-28 10:30:24
883
原创 22、Vue 插槽的深入分析
Vue插槽机制解析：从基础到实战 本文系统讲解了Vue插槽的核心概念、语法差异及实战应用。插槽本质是内容分发机制，分为默认插槽、具名插槽和作用域插槽三种类型。Vue3在语法上统一使用v-slot（简写#），并新增动态插槽名等特性。文章通过二次封装ElementUI表格组件、弹窗组件和布局组件三个典型场景，对比展示了Vue2和Vue3的实现差异。最后提供了面试回答框架（STAR法则）和加分技巧，包括性能优化、TypeScript类型定义和设计模式应用等深入知识点，帮助开发者全面掌握插槽技术。
2025-12-28 10:29:23
671
原创 21、Vue2 选项式API vs Vue3 组合式API 详解
Vue 2的选项式API（Options API）和Vue 3的组合式API（Composition API）是两种不同的代码组织方式。选项式API通过data、methods等预定义选项分类组织代码，适合简单组件；组合式API则通过setup函数和自定义Hook实现逻辑复用和聚合，解决了选项式API在大型组件中逻辑分散、复用困难、TS支持不佳等问题。两者核心区别包括：代码组织方式、复用机制、类型支持和响应式实现。实际开发中，小型项目可用选项式API，大型项目推荐组合式API，两者在Vue 3中可共存。组合
2025-12-28 10:27:52
558
原创 20、Vue2与Vue3挂载过程深度解析
Vue实例挂载过程解析：从Vue2到Vue3的核心差异 本文详细对比了Vue2和Vue3的实例挂载流程。Vue2采用构造函数模式，通过Object.defineProperty实现响应式，使用Watcher驱动更新；Vue3改用工厂函数模式，基于Proxy的响应式系统，采用effect副作用机制。关键差异体现在：初始化方式（new Vue() vs createApp()）、响应式原理（defineProperty vs Proxy）、渲染机制（Watcher vs ReactiveEffect）、编译优化
2025-12-27 10:48:43
501
原创 19、Vue跨域解决方案全指南
摘要：本文系统介绍了前端开发中的跨域问题及解决方案。跨域本质是浏览器同源策略的安全限制，涉及协议、域名和端口的一致性。开发环境推荐使用代理配置（Vue2的vue.config.js和Vue3的vite.config.js），生产环境建议采用Nginx反向代理或后端CORS配置。文章详细讲解了特殊场景处理（如Cookie携带、文件上传等）、跨域问题排查步骤（五步法）以及面试回答技巧（STAR法则）。重点强调：开发环境用代理解决，生产环境通过Nginx或后端配置实现，同时要注意携带Cookie等特殊场景的配置要
2025-12-27 10:45:52
784
原创 18、Vue组件与插件全解析：从定义到实战
本文系统分析了Vue中组件与插件的区别与应用。组件是可复用的UI单元，通过props/emit通信，适合构建具体界面元素；插件则通过install方法扩展全局功能，适合添加工具类特性。文章详细对比了Vue2和Vue3的实现差异，并提供了Toast消息提示和表单验证两个典型场景的组件与插件实现方案。最后总结了面试回答技巧，强调组件解决"是什么"(UI呈现)，插件解决"怎么做"(功能扩展)的核心差异。通过具体代码示例和场景分析，帮助开发者深入理解二者的适用场景与最佳实践。
2025-12-27 10:40:02
605
原创 17、Vue2与Vue3自定义指令全解析
Vue自定义指令开发指南 本文全面介绍了Vue2/Vue3自定义指令的实现方法、核心场景和最佳实践。主要内容包括： 实现对比 Vue2通过bind/inserted等5个钩子实现 Vue3采用与组件对齐的7个生命周期钩子 注册方式从Vue.directive()变为app.directive() 核心使用场景 防重复提交：按钮禁用控制 一键复制：兼容Clipboard API 防抖节流：支持自定义延迟 图片懒加载：IntersectionObserver实现 权限控制：支持禁用/移除两种模式 开发注意事项
2025-12-27 10:33:42
529
原创 16、深入解析Vue的nextTick原理与应用
摘要：nextTick是Vue的核心API，用于在DOM更新后执行回调。其实现基于事件循环机制，优先使用微任务（Promise/MutationObserver），降级使用宏任务。主要应用场景包括：获取更新后的DOM状态、在created钩子操作DOM、动态元素尺寸测量以及第三方库初始化。Vue2与Vue3的主要区别在于：Vue2提供全局和实例方法，实现复杂；Vue3仅通过导入使用，直接基于Promise实现更简洁。面试回答应涵盖基础概念、实现原理、应用场景和版本差异，避免将nextTick简单等同于set
2025-12-27 10:32:09
872
原创 15、Vue 修饰符完全指南
/ 全局自定义指令修饰符} else {el.focus()})// 使用-- 父组件 --><template>})// 检查是否有 capitalize 修饰符</script><template><input// 组件接收 modelModifiers})// 在更新时检查修饰符这样就可以使用了。
2025-12-26 17:12:22
785
原创 14、Vue Mixin 源码分析与使用场景详解
选项类型合并策略执行顺序生命周期钩子合并成数组mixin 先执行，组件后执行data递归合并对象组件数据优先（覆盖 mixin）对象合并组件选项覆盖 mixinwatch合并成数组都会执行对象合并组件选项覆盖 mixinMixin 是 Vue 提供的一种代码复用机制，可以将组件的公共逻辑抽离出来。Mixin 对象可以包含任意组件选项（data、methods、生命周期等），当组件使用 mixin 时，mixin 的选项会被"混入"到组件自身的选项中。
2025-12-26 17:05:21
637
原创 13、Vue2 与 Vue3 Diff 算法深度解析
使用快速 Diff：先同步前缀后缀缩小范围，对乱序部分用最长递增子序列（LIS）算法计算最少移动方案，配合编译时的 PatchFlags 实现靶向更新。：作为节点身份标识，确保正确复用、避免状态错乱、提升 Diff 效率。，通过四个指针从新旧节点数组的两端向中间靠拢，优先处理常见的 DOM 操作场景（头部插入、尾部追加、列表反转等）。使用双端比较：四个指针从两端向中间靠拢，优先匹配头头、尾尾、头尾、尾头，都不匹配时用 Key 映射表查找。是以最小 DOM 操作更新视图。：按索引位置"就地复用"
2025-12-26 16:27:44
808
原创 12、v-show 和 v-if 的区别
简单记忆：v-if：条件渲染，适合"要不要"的场景v-show：显示切换，适合"显示/隐藏"频繁切换的场景运行时条件很少改变 → 使用v-if需要频繁切换 → 使用v-show需要懒加载或条件复杂 → 使用v-if需要保持状态或性能优化切换 → 使用v-show。
2025-12-26 11:12:07
348
原创 11、v-if和v-for的优先级是什么？
特性Vue 2Vue 3优先级v-forv-ifv-for同时使用可以但不推荐（性能问题）会报错（访问不到循环变量）官方建议避免同时使用避免同时使用无论在 Vue 2 还是 Vue 3 中，都应该避免在同一个元素上同时使用v-if和v-for，使用计算属性或嵌套模板来优化代码结构和性能。
2025-12-26 11:00:56
152
原创 10、动态给vue的data添加一个新的属性会发生什么？vue2和vue3分别会怎么解决？
Vue2和Vue3在响应式数据处理上有显著差异。Vue2使用Object.defineProperty实现响应式，无法检测动态添加的属性，需要通过Vue.set或对象替换解决；Vue3采用Proxy代理整个对象，自动支持属性增删改的响应式更新。对于数组操作，Vue2需使用特定方法，而Vue3支持所有操作。最佳实践中，Vue2建议预定义属性并使用$set，Vue3则可直接操作。这一改进使Vue3开发更便捷，是框架的重要升级。
2025-12-25 16:56:54
293
原创 9、Vue组件中data为什么是函数而不是对象？
摘要： Vue组件中data必须是函数而非对象，核心原因是确保组件复用时数据隔离。JavaScript对象是引用类型，若data为对象，多个实例会共享同一数据，导致修改污染。而data作为函数时，每次实例化调用函数返回新对象，实现数据独立。Vue2根实例允许data为对象（仅实例化一次），但Vue3统一要求函数形式。Vue3的Composition API（如setup）通过每次执行自动创建新响应式数据，天然解决此问题。面试时可结合引用类型特性、工厂模式及源码逻辑（如initData中的类型判断）深入分析，
2025-12-25 16:38:25
357
原创 8、Vue 组件通信完整指南（Vue2 vs Vue3 深度对比）
通信方式适用场景Vue2Vue3主要差异Props父→子props: {}Vue3 支持 TS 泛型Emit子→父Vue3 强制声明v-model双向绑定valueinputmodelValueVue3 支持多个 v-model.sync双向绑定✅❌ 移除用替代$refs获取实例全暴露需Vue。
2025-12-25 16:20:53
1014
原创 7、Vue双向绑定原理大揭秘
Vue 的双向绑定是"数据劫持 + 发布订阅模式"的体现。Vue 2 到 Vue 3 的转变，本质上是从针对“属性”的劫持进化到了针对“整个对象”的代理，解决了长期以来存在的边缘情况 Bug，并大幅提升了框架的运行性能。
2025-12-25 15:50:34
537
原创 6、Vue生命周期全解析：从创建到销毁
Vue 的生命周期是指一个组件从到的整个过程。在这个过程中，Vue 提供了多个钩子函数（Hooks），允许开发者在特定阶段插入自己的逻辑。
2025-12-25 15:31:54
980
原创 5、Vue3 watch与watchEffect深度解析
Vue3中watch与watchEffect的核心区别在于依赖追踪方式：watch需显式指定监听数据源，可获取新旧值且默认惰性执行；watchEffect自动追踪回调中的所有响应式依赖，立即执行但无法获取旧值。从原理看，两者都基于ReactiveEffect实现，watch更精确适合特定逻辑处理，watchEffect更便捷适合多依赖的副作用同步。实际开发中，需对比新旧值或条件判断时用watch，多依赖同步或动态依赖关系时用watchEffect更高效。
2025-12-16 21:39:38
211
原创 4、Vue3 中 computed 计算属性和方法的区别详解
特性computed（计算属性）method（方法）主要用途基于已有数据计算派生值执行事件或动作，如按钮点击、表单提交缓存机制有缓存，只在依赖变化时重新计算无缓存，每次调用都会重新执行响应式响应式的，自动跟踪依赖的变化不响应式，手动调用时触发执行执行时机被访问时才执行每次调用时都会执行副作用不应有副作用，通常是纯计算可以包含副作用，如发送请求、修改状态等性能性能更优，适合需要缓存的计算性能较差，频繁调用时可能影响性能。
2025-12-16 21:33:23
971
原创 3、Vue3计算属性computed 与监听器watch 深度解析
本文详细解析了Vue3中computed计算属性和watch监听器的工作原理及核心区别。computed通过懒执行和缓存机制实现高效计算，适用于派生状态；而watch则专注于处理数据变化时的副作用操作，支持异步和清理机制。文章从底层实现、执行流程、特性对比到使用场景等多个维度进行了深入分析，并提供了性能优化建议和面试回答技巧。两者的本质区别在于：computed用于"是什么"的状态计算，watch用于"怎么做"的副作用处理。
2025-12-16 21:31:40
396
原创 2、详细说说vue2何vue3的工作原理以及区别？为什么vue3会做此升级？
在理解 Vue 原理之前，必须先理解虚拟 DOM。虚拟 DOM 本质上是一个JavaScript 对象（VNode），它是真实 DOM 的“蓝图”或“替身”。2. 为什么需要它？操作真实 DOM 代价高昂：真实 DOM 节点非常重（包含大量属性和事件）。频繁操作 DOM 会导致浏览器频繁重排（Reflow）和重绘（Repaint），性能极差。JS 计算很快：在 JS 层面通过对比两个对象（新旧 VNode）的差异（Diff），计算出最小的更变操作，然后再去更新真实 DOM，效率最高。
2025-12-09 18:42:26
970
原创 1、vue里的ref和reactive的工作原理是什么？以及它们的区别是什么？为什么有人说reactive“废弃”了？
Reactive: 基于Proxy，只对对象有效，存在解构和重新赋值丢失响应性的风险。Ref: 基于class的 getter/setter，统一了基本类型和对象的处理（对象内部调用 reactive）。结论: 建议在项目中优先使用 ref。它更加稳健，不易出错，且能够清晰地标识出“这是一个响应式数据”。
2025-12-09 17:53:36
875
原创 uniApp为什么微信开发工具会运行失败?
关闭当前的微信开发者工具。在 HBuilderX 里的配置好 AppID。在 HBuilderX 点击“重新运行”。等待控制台显示“编译成功”并在工具中自动弹出页面。照做一般就能解决的问题了。
2025-12-09 11:29:22
489
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人