vue2和vue3区别(vue执行顺序)

大家好，今天来为大家分享vue2和vue3区别的一些知识点，和vue执行顺序的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！

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

一，通过上面可以看到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和2.0的语法区别

1、vue2使用Object.defineProperty方法实现响应式数据，vue3使用proxy实现响应式数据

Object.defineProperty的缺点：

无法检测到对象属性的动态添加和删除

无法检测到数组的下标和length属性的变更

解决方法：

vue2提供Vue.$set动态给对象添加属性

Vue.$delete动态删除对象属性

重写数组的方法，检测数组变更

proxy的缺点：

es6的proxy不支持低版本浏览器（IE11）

会针对IE11出一个特殊版本进行支持

proxy的有点：

可以坚持到代理对象属性的动态新增和删除

可以监测到数组的下标和length属性的变化

2、vue3新特性：

①：数据响应重新实现（ES6的proxy代替ES5的Object.defineProperty）

②：源码使用ts重写，更好的类型推导

③：虚拟DOM新算法（更快、更小）

④：提供了compositionapi，为更好的逻辑复用与代码组织

⑤：自定义渲染器（app、小程序、游戏开发）

⑥：Fragment，模板可以有多个根元素

好了，关于vue2和vue3区别和vue执行顺序的问题到这里结束啦，希望可以解决您的问题哈！