用vue框架有什么好处

用vue的好处：1、Vue是组件化开发，减少代码的书写，使代码易于理解；2、可以对数据进行双向绑定；3、相比较传统的用超链接进行页面的切换与跳转，Vue使用的是路由，不用刷新页面；4、Vue是单页应用，加载时不用获取所有的数据和dom，提高加载速度，优化了用户体验；5、Vue的第三方组件库丰富，使用起来方便，提高了开发效率。

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

什么是Vue.js

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能驱动复杂的单页应用。

Vue.js的优点

• 体积小：压缩后只有33k；

• 更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；【学习视频分享：vue视频教程、web前端视频】

• 双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；

• 生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；

其实抛开官方的一些不知所云的说法，简单来说，在传统web开发中，我们搭建项目都以html结构为基础，然后通过jquery或者js来添加各种特效功能，需要去选中每一个元素进行命令。

这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者项目工程较大，代码的修改将是复杂繁琐的。

而这时候用了vue，这些问题都不复存在。在比如一些单网页制作成的应用程序，一般涉及到数据交互的内容都很多，而应用了vue之后将大大缩减工作量。

vue在web开发，网站制作中有哪些显著优势？

1、数据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。

2、组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。

使用vue有什么好处？

• Vue是组件化开发，减少代码的书写，使代码易于理解。

• 最突出的优势在于可以对数据进行双向绑定。

• 相比较传统的用超链接进行页面的切换与跳转，Vue使用的是路由，不用刷新页面。

• Vue是单页应用，加载时不用获取所有的数据和dom，提高加载速度，优化了用户体验。

• Vue的第三方组件库丰富，使用起来方便，提高了开发效率。

1、响应式性能提升

1）diff方法优化

diff 算法是虚拟 DOM 技术的必然产物，它会对新旧 DOM 进行比较，然后将变化的 DOM 更新在真实的 DOM 上。使用vue，在创建虚拟 DOM 的时候，会根据 DOM 中的内容添加一个静态标记，在数据发生改变的时候，就会带着静态标记的节点去对比，能够快速找到变化的 DOM 。

2）事件侦听器缓存

默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化，但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可。

3）ssr渲染

当存在大量静态内容时，这些内容会被当做纯字符串推进一个 buffer 内，即使存在动态绑定，也会通过模板插值潜入进去，这样会比虚拟 DOM 渲染快得多。

2、代码体积减少

打包大小减少41%。

vue 移除了一些不常用的 API，如：inline-template、filter 等，使用 tree-shaking。

Tree Shaking 摇树优化，指的就是当我们引入一个模块的时候，不引入这个模块的所有代码，只引入我们需要的代码。

在vue 中，引入tree-shaking，所有的 API 都通过 ES6 模块化的方式引入，这样就能够让 webpack 或 rollup 等打包工具在打包时，就会自动对没有用到的 API 进行剔除，最小化 bundle 体积。

初次渲染快55%, 更新渲染快133%。组件选择了按需引入，使得打包后的体积也更小了，所以项目运行的时候速度更快，更顺畅了！

3、编译被优化

vue 使用静态提升后，对于不参与更新的元素，只会被创建一次，在渲染时直接复用就好了。

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

4、组合式API

vue 新增了组合式 api ，更有利于维护和封装。一个功能模块代码会集中到一起，实现高内聚，低耦合。提高代码的可读性和可维护性，基于函数组合的 api 更好地重用逻辑代码。

5、更好的 ts 支持

vue 新增了 defineComponent 函数，使组件在 ts 下，更好的利用参数类型推断。如：reactive 和 ref 很具有代表性。

6、更先进的组件

• vue 中可以不需要根节点，多个元素或标签可并列存在。

• 可以把 teleport 中的内容添加到任意的节点内，对于嵌套较深的组件来说绝对是一个福音。

• 允许程序在等待异步组件渲染一些后备的内容，可以让我们创建一个平滑的用户体验。

7、简单总结：

vue 目前是国内最火的前端框架之一，vue 性能提升、运行速度也比其他框架好很多。

总之 vue 就是：

• 让项目更快

• 让代码更少

• 更易于维护

• 让我们开发更快，加班更少

（学习视频分享：web前端开发、编程基础视频）