vue2和vue3区别面试题，vue面试题及答案100题

编程之家2026-06-281071次浏览

本篇文章给大家谈谈vue2和vue3区别面试题，以及vue面试题及答案100题对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

vue2和vue3的区别：双向绑定更新不同、实例化不同、语法不同、获取props方式不同、数据和方法的定义不同。

一、双向绑定更新不同

vue2的双向数据绑定是利⽤ES5的⼀个API，Object.defineProperty对数据进⾏劫持结合发布订阅模式⽅式来实现的。vue3中使⽤了ES6的ProxyAPI对数据代理，通过reactive函数给每⼀个对象都包⼀层Proxy，通过Proxy监听属性的变化，从⽽实现对数据的监控。

二、实例化不同

vue2中new出的实例对象，所有的东西都在这个vue对象上，这样其实⽆论你⽤到还是没⽤到，都会跑⼀遍，这样不仅提⾼了性能消耗，也⽆疑增加了⽤户加载时间。

vue3中可以⽤ES module imports按需引⼊，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少了内存消耗，也同时减少了⽤户加载时间，优化⽤户体验。

三、语法不同

vue2使用的是webpack形式去构建项目，vue3使用vite构建项目。

四、获取props方式不同

vue2在script代码块可以直接获取props，vue3通过setup指令传递。

五、数据和方法的定义不同

vue2使⽤的是选项类型API（Options API），vue3使⽤的是合成型API（Composition API）。

Vue2和Vue3的区别如下：

双向数据绑定原理不同：Vue2使用ES5的Object.defineProperty()对数据进行劫持，结合发布订阅模式的方式来实现双向数据绑定；而Vue3使用了ES6的Proxy API对数据进行代理。

是否支持碎片：Vue2不支持碎片，而Vue3支持碎片（Fragments），使得可以拥有多个根节点。

API类型不同：Vue2使用选项类型api，选项型api在代码里分割了不同的属性：data, computed, methods等。

变更通知：在Vue2中，当给对象新增一个属性时，这个对象的所有watcher都会重新运行；而在Vue3中，只有依赖的属性的watch才会重新运行。

命令变化：启动项目命令由npm run dev变成了npm run serve。

项目结构：移除了配置文件目录，config和build文件，移除了vue.config.js文件，移除了static文件夹新增public文件夹，并且index.html移到public中，在src文件夹中新增了views文件夹用于分类视图组件和公共组件。

Vue3新加入了TypeScript以及PWA支持。

综上，Vue2和Vue3在多个方面存在区别。

一，通过上面可以看到vue3的新特性有：

1.速度更快

2.体积更小

（相比Vue2，Vue3整体体积变小了，除了移出一些不常用的API，再重要的是Tree shanking

任何一个函数，如ref、reavtived、computed等，仅仅在用到的时候才打包，没用到的模块都被摇掉，打包的整体体积变小）

3.更容易维护

4.更接近原生

5.更容易使用

二、Vue3新增特性

Vue 3中需要关注的一些新功能包括：

framents（在 Vue3.x中，组件现在支持有多个根节点）

Teleport（Teleport是一种能够将我们的模板移动到 DOM中 Vue app之外的其他位置的技术，就有点像哆啦A梦的“任意门”）

composition Api

createRenderer

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！