Vue简介

简介 | Vue.js (vuejs.org)

Vue.js是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架

SPA与前端路由

SPA（单页面应用，全程为：Single-page Web applications）指的是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序，简单通俗点就是在一个项目中只有一个html页面，它在第一次加载页面时，将唯一完成的html页面和所有其余页面组件一起下载下来，所有的组件的展示与切换都在这唯一的页面中完成，这样切换页面时，不会重新加载整个页面，而是通过路由来实现不同组件之间的切换。

单页面应用（SPA）的核心之一是：更新视图而不重新请求页面。

优点：

• 具有桌面应用的即时性、网站的可移植性和可访问性
• 用户体验好、快，内容的改变不需要重新加载整个页面
• 良好的前后端分离，分工更明确

缺点：

• 不利于搜索引擎的抓取
• 首次渲染速度相对较慢

Vue的优势

轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多，节省开发时间。

Vue的特点

1、响应式编程

通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑

• M -   Model:数据
• V  -   View:视图-模板
• VM - ViewModel（Vue实例）

当数据源发生变化时，会被 ViewModel监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM 监听到，VM会把变化过后最新的值自动同步到 Model 数据源中

2、组件化

Vue将组成一个页面的HTML，CSS和JS合并到一个组件中，可以被其他组件或页面引入而重复利用。通常每个.Vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件，重复利用的性质也大大提高了开发的效率。

组件化开发的优点：提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。

Vue2 与 Vue3 对比

Vue3的优势

• 启动速度更快
• 打包体积更小
• 内存消耗更低
• 使用TypeScript重写，提供更完善的类型推断和检查
• 引入Composition API,基于函数式编程,代码更聚合，语法更清晰
• ...

官方推荐初学者直接学Vue3即可😄

直接学 Vue 3 吧 —— 对话 Vue.js 作者尤雨溪 (qq.com)

Vue 2 的终止支持时间是 2023 年 12 月 31 日。在此之后，Vue 2 在已有的分发渠道 (各类 CDN 和包管理器) 中仍然可用，但不再进行更新，包括对安全问题和浏览器兼容性问题的修复等。

还有必要学习Vue2吗？

• 很多现有的项目仍在使用Vue2，为了能够维护、迁移或扩展现有项目，掌握Vue2是必不可少的
• 拥有庞大的社区和丰富的生态系统。在学习Vue2的过程中，你可以轻松获取到大量的学习资源、插件和解决方案
• 兼容低版本浏览器(IE9+)

Vue.js 官方的路由管理器

Vue Router (vuejs.org)

hash和history路由的区别 - 掘金 (juejin.cn)

路由模式	Hash	History
兼容性	😄兼容性较好	旧版本的浏览器和服务器环境中可能不支持
易用性	😄不需要特殊的服务器配置	需要服务器进行一些特殊的配置，以支持前端路由的正常运行
美观性	URL中带有"#"符号，不够友好和直观	😄简洁美观
安全性	URL中的"#"符号内容对于用户来说是可见的，可能暴露一些敏感信息	😄安全性较好
SEO	搜索引擎对于URL中的"#"符号内容不会进行解析，影响网页的搜索引擎优化	😄搜索引擎可以解析URL中的内容，有利于网页的搜索引擎优化

选择哪种模式取决于具体的需求和项目要求。如果对兼容性和简单易用性有较高要求，可以选择Hash模式；如果对URL美观性
和SEO支持有较高要求，可以选择History模式。