前端使用vue的好处 vue的特点及优势

今天我们就来看看vue3相对于vue2的优势。其中有哪些？为什么有人说:既然写了ts vue3，就再也回不到vue2了！vue3有什么好的？有的人回不了vue2，有的人回不了vue3！喜欢自己喜欢的收藏，复

今天我们就来看看vue3相对于vue2的优势。其中有哪些？

为什么有人说:既然写了ts vue3，就再也回不到vue2了！

vue3有什么好的？有的人回不了vue2，有的人回不了vue3！喜欢自己喜欢的收藏，复盘后不会迷路！

Performance：性能优化Tree-shaking ：支持摇树优化Composition API ：组合式api新增组件：Fragment、Teleport、Supense更好地支持 tsCustom Render API：自定义渲染器

性能方面，与vue2相比，vue3的性能提升了约1.3 ~ 2倍。我们来看看它在什么地方，如何改进。

2.1，响应式性能改进

1 & gtDiff方法优化

Diff算法是虚拟DOM技术的必然产物。它比较新旧DOM，然后在真实DOM上更新更改后的DOM。

在vue2中，当数据发生变化时，会生成一棵新的DOM树，然后与之前的DOM树进行比较，找到不同的节点，然后更新到真正的DOM。在比较的过程中，会比较没有变化的DOM，这需要一定的时间。

在vue3中，创建虚拟DOM时，会根据DOM中的内容添加一个静态标签。当数据发生变化时，会比较静态标签的节点，快速找到变化的DOM。

2 & gt事件监听器缓存

默认情况下，onClick被视为动态绑定，因此每次都会跟踪它的更改。

但是因为是同一个函数，所以不需要跟踪变化，只需要缓存就可以重用了。

3 & gtSsr渲染

当有大量静态内容时，它将作为一个纯字符串被推入缓冲区。即使有动态绑定，也会通过模板插值偷偷进来，会比虚拟DOM渲染快很多。

2.2，代码量

包装尺寸减少了41%。

Vue3移除了一些不常见的API，比如内嵌模板、过滤器等。，并使用摇树。

树摇优化是指当我们引入一个模块时，并不引入该模块的所有代码，只引入我们需要的代码。

在vue2中，很多函数都是挂载在全局vue对象上的，比如:nextTick，set function等。虽然我们不经常使用，但是只要在打包的时候引入Vue，这些全局函数都会打包成bundle。在vue3中引入了摇树，所有API都采用ES6的模块化方式引入，使得webpack或rollup等打包工具在打包时能够自动剔除未使用的API，最大限度减少捆绑体积。

初始渲染速度快了55%，更新后的渲染速度快了133%。组件按需引入，使得打包体积更小，项目运行更快更流畅！

2.3。编译已优化

1 & gt静态提升

在vue2中，无论元素是否更新，每次都会重新创建然后渲染。

vue3使用静态提升后，不参与更新的元素只会创建一次，渲染时直接重用就好了。

2 & gt碎片

不用在模板中创建唯一的根节点，可以直接放同级别的标签和内容。相当于少了一个节点嵌套渲染。

3.1.相对来说，vue3的组合api更有利于维护和封装。

3.2.组合api具有高内聚、低耦合的特点。

在vue2中使用option api将定义vue文件的data、methods、watch和computed中的属性和方法，共同处理页面逻辑。很多功能相互交叉，相互缠绕，代码过于分散。

Vue3增加了一个组合api，一个功能模块的代码会集中在一起，实现高内聚低耦合。提高代码的可读性和可维护性，基于函数组合的api可以更好的重用逻辑代码。

组合api和选项api的比较如下图所示:

每种颜色代表一种功能。

3.3.DOM元素应该没有问题。

在vue3中，setup函数取代了vue2中的beforeCreate和created。有的同学有时候在created里操作DOM元素，有时候报错，怀疑是不是看不出问题，所以不回应。使用setup后，这个问题就不容易出现了。

注意:

vue3的组合api中的OnUnmounted替换vue2中的beforeDestory。

vue3的卸载API替换了vue2中的destoryed。

和proxyobject。定义属性用于实现响应数据。

Vue3用proxy代替vue2的Object.defineProperty，效率更高，值得学习。

1 & gtVue2通过使用Object.defineProperty劫持了数据data的getter和setter操作，这样当数据被访问或赋值时，它会动态更新绑定的模板template。但是，Object.defineProperty必须遍历所有的pre值来劫持每个属性，而这个缺点正好可以通过代理来解决。

请比较proxyobject。定义属性，优点是:

代码的执行效果更快。proxy 可以直接监听对象而不是它的属性。proxy 可以直接监听数组的每个元素的变化。proxy 不需要初始化的时候遍历所有属性，如果有多层嵌套的话，只访问某个属性的时候，proxy 能够快速访问到，而 Object.defineProperty 还需要遍历所有属性，然后逐级向下访问。proxy 返回的是一个新对象，可以直接操作新对象而达到目标。而 Object.defineProperty 操作的是原对象，只能遍历对象属性然后对其直接修改。proxy 有 13 种拦截方法，不限于 apply、ownKeys、deleteProperty 等，而 Object.defineporperty 不具备。

2 & gtDefineProperty不能监听对象的新属性，也不能跟踪数组索引和数组长度。代理正好解决了这个问题。

在vue2中，当我们给一个对象添加一个属性时，如果添加的属性的值发生了变化，我们发现视图并没有更新，因为添加的属性无法被监控。类似地，通过下标直接改变数组，视图不能被更新，因为它不能被监控。

在vue3中添加代理解决了这些问题。

Vue2不适合ts，因为它的选项API风格。

Options是简单的对象，而ts是类型系统，面向对象的语法，两者不匹配。

Vue3增加了defineComponent函数，使得组件可以更好地利用ts下的参数类型推断。比如reactive和ref就很有代表性。

1 & gt碎片

在vue2中，每个模板必须有一个根节点，否则会报错。

vue3中可能不需要根节点，多个元素或标签可能并排存在。

2 & gt传送

门户网站。你可以在任何节点上添加transport的内容，这对于深度嵌套的组件来说绝对是个福音。

3 & gt监督

允许程序等待异步组件来呈现一些备份内容可以创建流畅的用户体验。

目前vue是国内最火的前端框架之一。vue3的性能有所提升，运行速度比vue2好很多。

简而言之，vue3就是:

让项目更快让代码更少更易于维护让我们开发更快，加班更少