前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别

简介: 前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别

一、回答点

监测机制的变化、Fragments(碎片)的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。

二、深入回答

监测机制的变化

  • Vue3中使用了ES6中Proxy API 对数据进行代理,监测整个对象,而不再是某个属性。
  • 消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。
  • Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。
  • Vue3中支持Map、Set、WeakMap和WeakSet

Fragments(碎片)

  • Vue2在组件中只能有一个根节点。
  • Vue3在组件中可以拥有多个根节点。

API模式的变化

  • Vue2使用选项式API(Options API)。Vue3使用组合式API(Composition API)

数据的存放

  • Vue2中数据存放在data属性中
  • Vue3使用setup()方法,setup()方法在组件初始化构造的时候触发。

         ●  从vue引入ref或reactive

         ● 简单数据类型使用ref()方法进行处理,复杂数据类型使用reactive()方法进行处理。

         ● 使用setup()方法来返回响应式数据,在template可以获取这些响应式数据。

生命周期钩子

  • setup():开始创建组件之前,在beforeCreate和created之前执行。
  • onBeforeMount():组件挂载到节点之前执行。
  • onMounted():组件挂载完成之后执行。
  • onBeforeUpdate():组件更新之前执行。
  • onUpdated():组件更新之后执行。
  • onBeforeUnmount():组件卸载之前执行。
  • onUnmounted():组件卸载之后执行
  • 若组件被keep-alive包裹,则多出两个钩子函数
  • onActivated():被激活时执行。
  • onDeactivated():A组件切换到B组件。A组件消失时执行。

父子传参

  • 子组件通过defineProps()进行接收,并且接收这个函数的返回值进行相应操作。

diff算法

  • Vue2:进行虚拟节点对比,并返回一个patch对象来存储两个节点的不同,最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素,进行比较会消耗性能。
  • Vue3:diff算法在初始化时会给每个虚拟节点一个patchFlags(优化的一个标识)。只会比较patchFlags发生变化的Vnode,从而进行视图更新,对比没有变化的做静态标记,渲染时直接复用。

v-if和v-for优先级

  • Vue2中:v-for优先执行
  • Vue3中:v-if优先执行
  • 注:最好不要把v-if和v-for同时用在一个元素上,这样会带来性能的浪费
相关文章
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持,重构前端开发范式。性能优化与生态协同并进,兼顾易用性与工程化,引领Web开发迈向高效、可维护的新纪元。(238字)
1407 139
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
1626 5
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
1448 1
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能,但仍需遵循最佳实践。合理使用 v-if、key、computed,避免深度监听,利用懒加载与虚拟列表,结合打包优化,方可充分发挥其性能优势。(239字)
744 1
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
1332 11
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
872 83
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
827 0
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
1306 1
|
JavaScript 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
625 22
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
1395 17