前端经典面试题 | 吊打面试官系列 之 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同时用在一个元素上,这样会带来性能的浪费
相关文章
|
2天前
|
安全 Java 程序员
Java面试必问!run() 和 start() 方法到底有啥区别?
在多线程编程中,run和 start方法常常让开发者感到困惑。为什么调用 start 才能启动线程,而直接调用 run只是普通方法调用?这篇文章将通过一个简单的例子,详细解析这两者的区别,帮助你在面试中脱颖而出,理解多线程背后的机制和原理。
33 12
|
3天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
34 10
|
1月前
|
Java
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
今日分享的主题是如何区分&和&&的区别,提高自身面试的能力。主要分为以下四部分。 1、自我面试经历 2、&amp和&amp&amp的不同之处 3、&对&&的不同用回答逻辑解释 4、彩蛋
|
2月前
|
Java 程序员
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
小米,29岁程序员,分享了一次面试经历,详细解析了Java中&和&&的区别及应用场景,展示了扎实的基础知识和良好的应变能力,最终成功获得Offer。
95 14
|
1月前
|
Java 关系型数据库 数据库
京东面试:聊聊Spring事务?Spring事务的10种失效场景?加入型传播和嵌套型传播有什么区别?
45岁老架构师尼恩分享了Spring事务的核心知识点,包括事务的两种管理方式(编程式和声明式)、@Transactional注解的五大属性(transactionManager、propagation、isolation、timeout、readOnly、rollbackFor)、事务的七种传播行为、事务隔离级别及其与数据库隔离级别的关系,以及Spring事务的10种失效场景。尼恩还强调了面试中如何给出高质量答案,推荐阅读《尼恩Java面试宝典PDF》以提升面试表现。更多技术资料可在公众号【技术自由圈】获取。
|
2月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
217 2
|
2月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
2月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
78 1