vue2和vue3的区别,vue2和vue3的区别是什么

http://www.itjxue.com  2023-01-15 16:01  来源:未知  点击次数: 

vue2和vue3区别面试题

1、vue2相较vue3代码可读性比较差。vue2中选项API格式的代码的可读性较差,当需要实现的某一个功能涉及到多个属性的时候,就会出现在

props中接收参数

在data中定义变量

在watch中监听变化

在computed中定义需要使用到的计算属性

在methods中定义事件响应方法

对相同数据操作的代码会被分隔到各个属性内,不利于阅读代码。而vue3的组合式API对这一缺点进行了优化,使用组合式API能够将我们想要关联的代码放到一个组合里,增加了代码的可读性和可维护性。

2、vue2使用的API中使我们的代码大量的使用了this,不利于代码逻辑的复用。而vue3使用的组合式API在涉及到跨组件之间提取,复用逻辑时,会非常的灵活。且Vue3中的composition API对类型推导很友好,对于TS的兼容性更高。

3、Vue2需要对每个对象的每个属性进行遍历,当对象的属性还是对象时,需要递归监听,影响性能。对于已创建的实例不允许动态添加根级别的响应式属性,不具备监听数组的能力。而vue3可以监听原生数组并监听对象属性的动态添加和删除。

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的区别

vue2 的双向数据绑定是利用 ES5 的一个API Object.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。

vue3 中使用了 ES6 的 Proxy API对数据代理。

相比 vue2.x ,使用 proxy 的优势如下:

在 vue2 中定义数据变量是 data(){} ,创建的方法要在 methods:{} 中。

而在 vue3 中直接在 setup(){} 中,在这里面定义的变量和方法因为最终要在模板中使用,所以最后都得 return 。

如:

除了这些钩子函数外, Vue3.x 还增加了 onRenderTracked 和 onRenderTriggered 函数。

这篇文章持续更新哟

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中的绑定事件和建立数据差不多

vue3与vue2的比较

vue2 是一个构造函数,通过new创建一个Vue实例

vue3是一个对象。通过对象Vue的createApp()方法创建一个vue实例

vue2

vue3

vue2 可以是一个对象或者由方法返回一个对象

vue3只能由方法返回一个对象

vue2的属性不具备相应式,要实现响应式有两种方法

(1). forceUpdate()强制刷新页面,比较损耗性能

(2). set()方法给对象添加新属性,针对性强制刷新,性能消耗低

(3). push 、pop、 unshift、 shift、sort、reverse、splice

vue3 实现响应式数据

(责任编辑:IT教学网)

更多