理想科技前端培训配套文档

Appearance

简介 ​

首先我们来看vue官网对vue的介绍

注意

vue是一个JavaScript框架并不是一门新的语言，而是建立在JavaScript之上，利用JavaScript的语法和特性来实现其功能

渐进式 JavaScript 框架 ​

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

  • 无需构建步骤，渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

以上引用摘自vue官网，对于初学者来说，看到这里可能会有点蒙，其实这里指的是vue的设计理念：在视图模板引擎的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。

比如说我现在已经有了一个完整的系统，我只想其中某个页面使用vue，只需要使用cdn引用vue.js，在script标签里创建vue的实例即可，就像jquery那样去使用vue，无需构建打包

又比如说我只想做个小型项目，就可以自己封装一个简单的状态管理，不需要去引用vuex和pinia这种大规模的状态管理也一样可以实现需求

TIP

有关于状态管理的说明我们后续的课程中会讲，这里只做举例说明

就像vue官网说的那样

Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。

响应式系统 ​

vue最标志性的功能就是其低侵入性的响应式系统，那么什么是响应式系统呢？简单来说，响应式系统是指当数据发生变化时，系统能够自动地检测到这个变化，并更新相关的视图,同时响应式系统也是MVVM(Model-View-ViewModel)数据驱动编程的特色，

MVVM是一种软件架构模式，将视图UI和业务逻辑分开，通过对逻辑数据的修改即可驱动视图UI的更新，因此我们常将这种编程方式称为 “数据驱动” ，与之对应的需要操作DOM才能完成视图更新的编程方式则称为 “事件驱动” 。

下面我们来举例说明事件驱动和数据驱动的区别。

首先是事件驱动的例子：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件驱动示例</title>
</head>
<body>
<h1>事件驱动示例</h1>
<button id="btn">点击我</button>
<div id="output">初始文本</div>

<script>
// 获取按钮和输出区域的 DOM 元素
const btn = document.getElementById('btn');
const output = document.getElementById('output');

// 添加点击事件处理函数
btn.addEventListener('click', function() {
    output.textContent = '按钮被点击了！';
});
</script>
</body>
</html>

然后是vue3数据驱动的例子

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 数据驱动示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h1>Vue 3 数据驱动示例</h1>
    <button @click="changeText">点击我</button>
    <div>{{ message }}</div>
</div>

<script>
const { createApp, ref } = Vue;

const app = createApp({
    setup() {
        const message = ref('初始文本');
        
        const changeText = () => {
            message.value = '按钮被点击了！';
        };

        return {
            message,
            changeText
        };
    }
});

app.mount('#app');
</script>
</body>
</html>

通过对比这两个例子，可以清楚地看到事件驱动和数据驱动的区别：

事件驱动通过监听用户的操作（比如点击）来触发相应的事件处理函数，然后更新页面上的内容或执行相应的逻辑

而数据驱动则是通过数据的变化来自动更新视图。我们不用去找到它，只需要修改数据即可

单页面应用 ​

我们本次课程主要就是学习怎么使用前端工程化去开发一个单页面的应用

在了解单页面应用之前，我们首先来简单说下传统的多页面应用

名词全称中文
MPAMulti-Page Application多页面应用
SPASingle-Page Application单页面应用

MPA 多页面应用是早些年很常见的web应用架构模式，当一个网站有多个页面时，会对应有多个实际存在的 HTML 文件，比如说我们想实现一个列表页跳到详情页的一个功能，就需要创建一个list.html文件和一个detail.html文件，在访问列表页的时候浏览器会加载整个list.html文件的内容，当触发跳转到详情页的时候，浏览器会再次加载detail.html文件，这时候可能会出现一个问题：用户会感受到页面切换的延迟，尤其是在网络速度较慢的情况下。

SPA 单页面应用的诞生很好的解决了这个问题，与 MPA 相反，不论站点内有多少个页面，在 SPA 项目实际上只有一个 HTML 文件，也就是 index.html 首页文件。

它只有第一次访问的时候才需要经历一次完整的页面请求过程，之后的每个内部跳转或者数据更新操作，都是通过 AJAX 技术来获取需要呈现的内容并只更新指定的网页位置。

虽然SPA 在页面跳转的时候，浏览器地址栏也会发生变化，但是它并不会重新加载整个页面的资源。

SPA的页面跳转主要有以下两种方式：

  1. 通过修改 Location:hash 修改 URL 的 Hash 值（也就是 # 号后面部分），例如从 https://example.com/#/foo 变成 https://example.com/#/bar
  2. 通过 History API 的 pushState 方法更新 URL ，例如从 https://example.com/foo 变成 https://example.com/bar

这两个方式的共同特点是更新地址栏 URL 的时候，均不会刷新页面，只是单纯的变更地址栏的访问地址，而网页的内容则通过 AJAX 更新，配合起来就形成了一种网页的 “前进 / 后退” 等行为效果。

提示

关于页面跳转的详细说明，我们会在后续路由的章节中讲到

SPA 的优点 ​

  • 只有一次完全请求的等待时间（首屏加载）
  • 用户体验好，内部跳转的时候可以实现 “无刷切换”
  • 因为不需要重新请求整个页面，所以切换页面的时候速度更快
  • 因为没有脱离当前页面，所以 “页” 与 “页” 之间在切换过程中支持动画效果
  • 脱离了页面跳页面的框架，让整个网站形成一个 Web App ，更接近原生 App 的访问体验
  • 开发效率高，前后端分离，后端负责 API 接口，前端负责界面和联调，同步进行缩短工期

SPA 的缺点 ​

虽然 SPA 应用在使用过程中的用户体验非常好，但也有自身的缺点存在：

  • 首屏加载相对较慢

由于 SPA 应用的路由是由前端控制， SPA 在打开首页后，还要根据当前的路由再执行一次内容渲染，相对于 MPA 应用从服务端直出 HTML ，首屏渲染所花费的时间会更长。

  • 不利于 SEO 优化

由于 SPA 应用全程是由 JavaScript 控制内容的渲染，都是在用户操作网页之后动态渲染出来的，index.html 通常是一个空的页面，只有最基础的 HTML 结构，页面内容没有呈现在 HTML 代码里，因此对搜索引擎来说，爬不到实质性的内容，也就无法收录和当前网站相关的信息，如下为一个vue项目构建之后生成的index.html

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/index-wIr5V5u9.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

前端工程化 ​

现在前端的工作与以前的前端开发已经完全不同了。

刚接触前端的时候，做一个页面，是先创建 HTML 页面文件写页面结构，再在里面写 CSS 代码美化页面，再根据需要写一些 JavaScript 代码增加交互功能，需要几个页面就创建几个页面，相信大家的前端起步都是从这个模式开始的。

而实际上的前端开发工作，早已进入了前端工程化开发的时代，已经充满了各种现代化框架、预处理器、代码编译…

前端工程化的优势 ​

在开发层面，前端工程化有以下这些好处：

  1. 引入了模块化和包的概念，作用域隔离，解决了代码冲突的问题
  2. 按需导出和导入机制，让编码过程更容易定位问题
  3. 自动化的代码检测流程，有问题的代码在开发过程中就可以被发现
  4. 编译打包机制可以让使用开发效率更高的编码方式，比如 Vue 组件、 CSS 的各种预处理器
  5. 引入了代码兼容处理的方案（Babel ），可以让开发者自由使用更先进的 JavaScript 语句，而无需顾忌浏览器兼容性，因为最终会转换为浏览器兼容的实现版本
  6. 引入了 Tree Shaking 机制，清理没有用到的代码，减少项目构建后的体积

Copyright © 2024-present 理想科技