vue2和vue3区别面试题,vue2 与vue3的区别

vue2和vue3区别面试题,vue2 与vue3的区别详细介绍

本文目录一览： vue2和vue3区别

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和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在多个方面存在区别。

vue2和vue3区别开发环境问题？

1、Vue3的Template支持多个根标签，Vue2不支持2、Vue3有createApp()，而Vue2的是newVue()createApp(组件)，newVue({template,render})3、v-model代替以前的v-model和.syncvue3中v-model的用法要求：props属性名任意，这里假设为x，那么事件名必须为“update：x”
>
>vue2中的写法:<
> >vue3中的写法:<

>4、context.emit新增context.emit，与this.$emit（vue3中只能在方法里使用）作用相同

Vue2和Vue3的区别&&Vue3的组合式API

（1）、vue2:是一个构造函数，通过该构造函数创建一个Vue实例

（2）、Vue3:是一个对象。并通过该对象的createApp()方法，创建一个vue实例。

（1）、Vue2：可以通过el选项和$mount()方法来挂载容器。

（2）、Vue3:只能通过mount()方法来挂载容器

（1）、Vue2:data选项可以是一个对象，也可以是一个方法（由方法返回一个对象）。

（2）、Vue3:data选项只能是一个方法，由方法返回一个对象。

（1）、Vue2:后添加的属性不具备响应式。要想实现响应式只有两种方法。
(1)、 set（）方法给对象添加新的属性，确保新添加的属性同样具备响应式。
(3)、操作数组后同时要具有响应式，必须要使用下面的方法：push（在数组的最后面添加数据）、pop（删除数组的最后一个数据）、unshift(在数组前面添加内容)、shift(删除数组最前面的数据)、sort(排序)、reverse（反转）、splice（截取删除）
示例：

（2）、Vue3:vue3是自动实现数据响应式。

（1）、Vue2：定义方法的时候需要写在methods里面
在Vue2中，后添加的属性是非响应式的。页面不更新。需要用get()和set()方法.

（2）、Vue3：组合式API的作用是将原来分散开来定义的数据、方法、计算属性、监听器、组合起来定义一个完整的业务。
ref:用来定义响应式数据

页面中：

vue2.0和3.0区别

项目目录不同
1、vue-cli3.o移除了config.文件夹。
2、多了vue.config.js文件。
3、新增了一个views文件夹。
4、删除了static新增了public文件夹。
5、index.html移动到public了。
配置项不同
1、vue-cli2.0的域名配置，分为开发环境和生产环境。
2、所以配置域名时，需要在config中的dev.env.js和。
3、prod.env.js中分别配置3.0 config.文件已经被移除。
4、但是多了。env.production和env.development文件。
5、除了文件位置，实际配置起来和2.没什么不同。
创建项目的方式不一样
1、vue-cli2.0，vue init webpack项目名。
2、vue-cli3.0 vue create项目名。

vue2与vue3的区别

? ? ? ?最近接触并了解了vue3，发现vue2的语法vue3能够继续使用，并没有任何影响，但是vue3还是和vue2有很大区别的

1.template标签

? ? ? ?我们在使用vue2的时候，template标签只能写一个元素，所以我们要用一个大的盒子把里面的元素包起来，但是vue3中却解除了这个限制，也就是说，一个template标签中可以写多个标签

2.建立数据

在vue2中，我们在写需要的数据的时候需要在export?default的里面添加data并把它return出来

而在vue3中，新增了个函数setup，

vue2中的声明周期都是写在data外面的，和data同级，但是vue3的生命周期是写在setup函数里面的

3.绑定事件

vue3中的绑定事件和建立数据差不多

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

记录一下vue3.0与2.0简单使用上的区别

1、创建实例方式不同：2.0 使用构造函数new Vue的方式，将选项对象通过参数传入；3.0 使用Vue.createApp()静态方法创建。参数依然是选项多先发。2.0 使用 符。
2、定义指令、组件等方法的不同： 2.0 定义指令和组件等是通过Vue的静态方法Vue.component()或者Vue.directive()等；3.0将静态方法改为了实例的方法app.component(),app.directive().
3、生命周期不同：2.0生命周期3个阶段:

5、v-model不同：

6、异步组件的一些对象参数发生变化
7、自定义指令不同
2.0 指令的钩子函数：

vue2选项api和vue3组合式api的区别？

vue2选项api和vue3组合式api的区别的如下就是API的使用方式，在Vue2中使用的是选项API（Options，API）在Vue3中使用的组合API（Composition，API）一、什么是选项API写法如下1代码风格data选项写数据，methods选项写函数。一个功能逻辑的代码分散2、易于学习和使用，写代码的位置已经预定好3、缺点代码组织性差，相似的逻辑（功能）代码不便于复用，逻辑负责代码多了不好阅读二、什么是组合API写法以功能为单位组织代码结构，后续重用功能更加方便总结、组合API的最大好处就是以功能为单位组织代码结构，有利于代码的复用