本篇文章给大家谈谈vue2和vue3的区别，以及vue2与vue3 diff对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue3与vue2的比较
• 2、Vue2和Vue3的区别
• 3、vue2与vue3的区别
• 4、vue3.0和2.0的区别
• 5、vue2 与vue3的区别
• 6、Vue2和Vue3的区别&&Vue3的组合式API

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 实现响应式数据

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.0和2.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的新特性有：

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

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和vue3的区别和vue2与vue3 diff的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。