【Vue】Vue介绍随着互联网的发展，前端要处理的业务逻辑，不在是单一的数据展示那么简单了。他的交互体验感越来越高，组件

1. 前端技术的发展

前端开发的基础语言为HTML、CSS和JavaScript，其中，HTML用于搭建页面的内容结构；CSS用于美化页面的显示效果；JavaScript用于处理用户和页面之间的交互行为。随着互联网的发展，前端要处理的业务逻辑，不在是单一的数据展示那么简单了。他的交互体验感越来越高，组件化，高内聚，低耦合，等名字不断的进入我们的视线。前端框架就营运而生了。

为了提高开发效率，市面上出现了基于MVVM模式的前端开发框架，例如Angular、React、Vue等。这些框架以数据为核心，使用户关注业务逻辑的处理，减少了手动的DOM操作。在Angular、React和Vue这3个框架中，Vue体积较小，在使用上更容易上手、更加灵活。

什么是单页Web应用?

单页Web应用将所有的功能局限于一个Web页面中，仅在该页面的初始化时加载相应的资源（必要的HTML、CSS和JavaScript代码）。

在页面加载完成后，所有的操作都在这个页面上完成，且不会因用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态地变换页面的内容，从而实现页面与用户的交互。

单页面应用优点

良好的交互体验。在单页Web应用中，内容的改变不需要重新加载整个页面，响应速度更快。

良好的前后端分离开发模式。后端专注于提供API，更容易实现API的复用。

减轻服务器的压力。单页Web应用中的数据是通过Ajax获取的，不需要重新加载，服务器的压力较小。

单页面应用缺点

首屏加载慢，在首次加载时需要将页面中所用到的资源全部加载。

不利于搜索引擎优化（Search Engine Optimization，SEO）。

注：搜索引擎优化（Search Engine Optimization,SEO）,按照搜索引擎的检索规则对网站进行内部调整以及站外优化，使得网站满足搜索引擎的检索规则对用户更加友好,从而使网站更加容易被搜索引擎收录，提升排名，带来流量，产生效益。

缺点解决

首屏加载慢可以通过路由懒加载、代码压缩、网络传输压缩等方式解决

搜索引擎优化可以通过服务器端渲染（Server-Side Rendering，SSR）技术解决。

2. Vue简介

Vue（读音：/Vjuː/）是一款用于构建用户界面的渐进式框架。其中，“渐进式”是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。

2.1 Vue优点

轻量级。Vue是一个轻量级的前端开发框架，文件体积小。
Vue项目基于JavaScript语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。
Vue在使用上比较灵活，开发人员可以选择使用Vue开发一个全新项目，也可以将Vue引入现有项目。
Vue通过虚拟DOM技术减少对DOM的直接操作，并通过尽可能简单的API来实现响应的数据绑定，可支持单向和双向数据绑定。
Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发。
Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度。

2.2 Vue设计模式

Vue是基于MVVM模式的框架。

MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。

Model是指数据部分，负责业务数据的处理；
View是指视图部分，即用户界面，负责视图处理；
ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。

工作原理

View和Model不能直接通信，它们需要借助ViewModel才能进行通信。ViewModel相当于一个观察者，监控着View和Model的动作，实现了View与Model的解耦。

ViewModel 包含 DOM Listeners 和 Data Bindings。

DOM Listeners 用于监听View中DOM变化，并在DOM变化时通知Model做出相应的修改。

Data Bindings用于监听Model中的数据变化，并在数据变化时通知View做出相应的修改。

### 2.3 Vue的特性

Vue有4个特性,分别是数据驱动视图、双向数据绑定、指令、插件

2.3.1 数据驱动视图

在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。

2.3.2双向数据绑定

Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。

2.3.3 指令

指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。

指令的名称以“v-”开头，作用于HTML中的元素。将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind指令用于实现单向数据绑定，v-if指令用于实现页面条件渲染，v-for指令用于实现页面列表渲染等。

2.3.4 插件

Vue支持插件，通过加载插件可以实现更多的功能。

常用的插件有

vue（核心库）
vue-router（路由方案）router.vuejs.org/zh/
vuex（状态管理方案） vuex.vuejs.org/zh/guide/
Pinia（轻量级状态管理库）pinia.vuejs.org/zh/
构建工具脚手架vite、webpack
其他组件库(Element Plus、Ant Design Vue、vant)
vue的全家桶

2.4 Vue版本

Vue2（2024年开始不在维护）
Vue3（逐步取代Vue2，语法兼容Vue2）

:o:面试题

Vue 3的新特性都有什么？

① 体积更小，采用按需编译的方式编译出来的文件体积比Vue 2的小。

② 性能提升，运行速度比Vue 2快1.5倍左右。

③ 具有更好的TypeScript支持。

④ 暴露了更底层的API，可以通过多种方式组织代码，代码使用上更加灵活。

⑤ 提供了更先进的组件。Vue创建了一个虚拟的Fragment节点，允许组件中有多个根节点。

⑥ 提供组合式(Composition)API，能够更好地组合逻辑、封装逻辑、复用逻辑。