🚀前言

在深入学习 Vue 框架之前,我们首先需要熟练掌握前端开发的三个基本技术：HTML、CSS和JavaScript。同时，通过对Vue的初步体验，相信读者已经感受到了它在开发过程中带来的便利和效率。现在，尝试通过解答下列问题来检验读者在本章的学习成果吧!如果对每个问题都有了清晰的答案，那么恭喜你，可以进入下一章进行学习了。

🚀一、小结与上机演练

🔎1.在网页开发中，HTML、CSS和JavaScript分别扮演了什么角色?

1. HTML（超文本标记语言，HyperText Markup Language）：
   HTML 是网页的骨架和内容载体，用于定义网页的基本结构和内容。它通过一系列标签（如 <h1>、<p>、<div> 等）来组织和显示文本、图片、视频、表格、链接等各种元素。简单来说，HTML 确定了网页上要显示什么内容及这些内容的层次关系。

2. CSS（层叠样式表，Cascading Style Sheets）：
   CSS 是网页的“外观设计师”，负责网页的样式和布局。它定义了 HTML 元素的视觉表现，包括颜色、字体、排版、间距、背景、动画效果等。通过使用 CSS，开发者可以让网页更具吸引力和美观，同时可以实现响应式布局，以适应不同设备的屏幕尺寸。

3. JavaScript：
   JavaScript 是网页的“行为控制器”，为网页添加交互功能。它使网页从静态的内容转变为动态和交互式的应用。JavaScript 可以处理用户的点击、输入、滚动等事件，实现动态内容更新、数据验证、动画效果、网络请求等功能。通过 JavaScript，网页不仅可以响应用户的操作，还可以与服务器进行数据交互，增强用户体验。

🦋1.1 总结

• HTML 定义了网页的结构和内容。
• CSS 负责网页的样式和布局。
• JavaScript 处理网页的行为和交互。

这三者共同构成了现代网页开发的核心技术，分别承担不同的职责，并协同工作，实现完整的用户体验。

🔎2.Vue3版本相较于之前的版本有哪些显著的改进?

Vue 3 相较于之前的 Vue 2 版本，带来了许多显著的改进和优化，以下是其中几个关键的改进点：

🦋2.1 Composition API

Vue 3 引入了全新的 Composition API，与 Vue 2 的 Options API 相比，Composition API 提供了更灵活的方式来组织代码和逻辑。其主要优势包括：

• 代码复用性更高：可以将功能逻辑更方便地抽离成独立的函数，便于复用和维护。
• 逻辑更加清晰：对复杂组件中的逻辑分离和组合更加自然，减少了代码的分散和重复。
• 更好地支持 TypeScript：Composition API 的设计使得与 TypeScript 的集成更加顺畅。

🦋2.2 更小的体积和更快的性能

Vue 3 在性能和体积上都得到了显著优化：

• 树形拆解（Tree-shaking）：Vue 3 的核心模块是按需加载的，使用时只加载必要的功能，未使用的部分不会被打包到最终的项目中，减小了打包后的体积。
• 更快的渲染性能：虚拟 DOM 的性能得到了改进，Vue 3 对比 Vue 2 在大规模数据渲染场景下有更高的效率。

🦋2.3 Fragments、Teleport 和 Suspense 支持

• Fragments：在 Vue 2 中，一个组件只能有一个根元素。Vue 3 中支持组件返回多个根元素，消除了对不必要的 div 包裹的需求。
• Teleport：允许开发者将某个组件的 DOM 渲染到应用外部的指定位置，例如模态框或通知等组件，不再局限于父组件的 DOM 层次中。
• Suspense：用于处理异步组件的加载，类似于 React 的 Suspense，可以在异步操作完成前渲染占位符内容，大幅提升异步加载的用户体验。

🦋2.4 更好的 TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善，核心代码完全用 TypeScript 编写，类型推断更智能。开发者可以更容易地使用 TypeScript 构建 Vue 应用，享受到更好的类型安全性和代码提示功能。

🦋2.5 新编译器与优化

Vue 3 的编译器得到了重写和优化，尤其是在静态内容处理方面，极大地减少了不必要的重渲染。新编译器具备以下特点：

• 静态提升：在编译过程中，将不会发生变化的部分提升到组件外部，避免重复计算和渲染。
• 缓存事件处理函数：对事件处理函数进行缓存，避免每次重新渲染时重新创建事件处理器，减少性能开销。

🦋2.6 自定义渲染 API（Custom Renderer API）

Vue 3 提供了自定义渲染 API，开发者可以用它来扩展 Vue 的渲染功能，将 Vue 应用渲染到不同的目标，例如 canvas、WebGL 或其他环境。这极大地拓展了 Vue 的应用场景，提升了灵活性。

🦋2.7 改进的 Reactivity 系统

Vue 3 对响应式系统进行了重构，基于 Proxy 实现响应式数据。相比 Vue 2 的 Object.defineProperty 实现，Vue 3 的 Proxy 优势在于：

• 完全支持数组和对象的所有属性：解决了 Vue 2 中无法侦听对象新增属性和数组下标变化的问题。
• 更好的性能：Vue 3 的响应式系统整体性能得到了提升，尤其是在大型应用中更为明显。

🦋2.8 Vite 和 Vue CLI 集成

Vue 3 更加推荐使用 Vite 作为开发工具。Vite 是一个更快速、现代的构建工具，采用 ES modules 并支持热模块替换（HMR），极大地提升了开发体验和构建速度。

🦋2.9 其他改进

• 增强的 v-model：Vue 3 中的 v-model 支持双向绑定多个值，且具备更灵活的语法。
• 更友好的 SSR（服务端渲染）支持：Vue 3 中的服务端渲染改进了 API 设计，减少了开发复杂度并提升了性能。
• 开发工具升级：Vue 3 的开发工具 Vue DevTools 提供了更好的调试体验，尤其是在 Composition API 相关功能上。

Vue 3 相比 Vue 2 有诸多显著的改进，特别是在代码组织、性能优化、类型支持和开发体验等方面。通过 Composition API、Proxy-based 响应式系统、Fragments 等新特性，Vue 3 为开发者提供了更强大的工具和更灵活的开发体验，适合构建现代复杂的前端应用。

🔎3.在 Vue 中，数据绑定是如何工作的?什么是单向绑定和双向绑定?

在 Vue 中，数据绑定是 Vue 框架的核心功能之一，它允许开发者将数据模型和视图（HTML）进行同步。通过数据绑定，Vue 可以自动响应数据的变化，并将这些变化反映在用户界面上，无需手动操作 DOM。Vue 的数据绑定是基于其响应式系统的，该系统能够自动追踪依赖关系，当数据发生改变时，自动更新界面。

🦋3.1 Vue 中的数据绑定

Vue 中的数据绑定方式主要有两种：

1. 插值绑定（Interpolation Binding）：用于在模板中绑定变量值，最常见的就是使用 {{ message }} 语法将数据绑定到 HTML。
2. 指令绑定（Directive Binding）：Vue 提供了多个指令来绑定数据，比如 v-bind 绑定属性，v-model 实现双向绑定，v-if 或 v-for 控制显示等。

🦋3.2 响应式系统

Vue 的响应式系统基于 JavaScript 的 Proxy（Vue 3）或 Object.defineProperty（Vue 2）来实现，它会将普通对象中的每个属性转换为 getter 和 setter。当数据变化时，Vue 的响应式系统会追踪到这些变化并自动更新视图。

🦋3.3 单向绑定

单向绑定是指数据从数据模型（JavaScript 代码中的数据）流向视图（DOM），但视图的变化不会影响数据模型。Vue 中大多数绑定（例如 v-bind）都是单向的。单向绑定的优点是数据流更简单、逻辑清晰，避免了双向绑定可能引发的复杂性。

示例：

<p>{{ message }}</p>
<!-- 通过 v-bind 指令绑定元素的属性 -->
<img v-bind:src="imageUrl">

在这个例子中，{{ message }} 和 v-bind:src 都是单向绑定，数据的变化会更新 DOM 结构，但用户在浏览器中的操作不会反过来修改 JavaScript 中的 message 或 imageUrl 变量。

🦋3.4 双向绑定

双向绑定是指数据模型和视图之间的同步：当数据模型发生变化时，视图会自动更新；反之，当用户在视图中进行交互时（如输入表单数据），数据模型也会自动更新。双向绑定的典型例子就是使用 v-model 指令来绑定表单元素。

示例：

<input v-model="message">
<p>{{ message }}</p>

在这个例子中，v-model 实现了双向绑定。输入框中的值会实时绑定到 message 变量，当用户在输入框中输入文字时，message 的值也会同步更新到数据模型。同时，message 的变化也会通过插值 {{ message }} 实时反映在页面上。

🦋3.5 单向绑定 vs 双向绑定

1. 单向绑定：

   • 数据只从模型流向视图，视图不会直接修改模型数据。
   • 适用于不需要用户交互或复杂数据流的场景，例如静态内容展示、属性绑定等。
   • 易于理解和维护，数据流动方向明确。

2. 双向绑定：

   • 数据可以同时流动：从模型到视图，视图中的用户交互也可以反向影响模型。
   • 常用于表单输入等需要用户交互的场景。
   • 提供了更好的用户体验，但可能引发复杂的逻辑问题，如在大型应用中管理数据流动时容易失控。

🦋3.6 总结

• Vue 中的数据绑定是通过响应式系统实现的，自动追踪数据的变化并更新视图。
• 单向绑定指的是数据从模型到视图的单向流动，常用于静态内容的展示。
• 双向绑定允许模型和视图之间的同步变化，常用于表单等用户交互场景。通过 v-model 实现，数据模型会根据用户的操作动态更新。

🔎4.根据你对 Vue 示例工程的体验，你认为使用 Vue 开发前端页面有哪些优势?

🦋4.1 简洁且易于上手

Vue 的设计理念非常注重简洁性，初学者可以快速上手。它提供了非常直观的模板语法（类似于 HTML），加上明确的指令（如 v-if、v-for、v-model 等），开发者可以迅速理解如何实现基本功能。即使没有框架经验的人，凭借 HTML 和 JavaScript 基础就可以轻松上手。

🦋4.2 双向数据绑定

Vue 通过 v-model 实现的双向数据绑定让开发者可以轻松处理表单、用户输入等交互逻辑，无需手动更新视图或管理事件监听器。Vue 自动处理数据和视图的同步更新，减少了大量的重复代码和维护成本。

🦋4.3 组件化开发

Vue 支持强大的组件化开发，允许开发者将页面拆分为多个独立的可复用组件。组件化使得代码结构更清晰，开发效率提高，特别是在构建大型应用时，组件可以复用，降低维护成本。

🦋4.4 响应式数据系统

Vue 的响应式系统能自动追踪数据变化并更新 DOM，无需手动操作 DOM 节点。开发者只需定义好数据和视图的绑定关系，当数据发生变化时，Vue 会自动更新页面的显示，极大简化了前端开发工作。

🦋4.5 优秀的开发者工具

Vue DevTools 提供了强大的调试和性能监控功能，帮助开发者快速定位问题，调试组件状态，跟踪数据流动。与其他框架相比，Vue DevTools 使用方便，集成度高，提高了开发体验。

🦋4.6 Vue Router 和 Vuex 的支持

Vue 提供了官方的路由库 Vue Router 和状态管理库 Vuex，帮助开发者轻松管理应用的多页面导航和全局状态。通过这两个库，开发者可以实现复杂的单页应用（SPA）结构，并有效管理数据流和组件状态。

🦋4.7 高性能

Vue 通过虚拟 DOM 技术实现高效的 DOM 更新，并且 Vue 3 中引入的性能优化（如静态提升和缓存机制）进一步提升了页面的渲染速度和性能，特别是在大规模数据处理时优势明显。

🦋4.8 灵活性和渐进式框架

Vue 是一个渐进式框架，开发者可以根据项目需求逐步引入功能。从简单的模板到引入组件化开发、路由、状态管理等功能，Vue 都可以灵活适应各种项目需求。它可以与现有项目无缝集成，也可以用于构建全新的大型应用。

🦋4.9 良好的社区支持和生态系统

Vue 拥有庞大的社区和丰富的生态系统。开发者可以从社区中找到大量插件、工具和学习资源，极大地减少开发过程中的重复工作。此外，Vue 的官方文档全面且清晰，开发者可以迅速找到所需的帮助和指引。

🦋4.10 更好的 TypeScript 支持

在 Vue 3 中，对 TypeScript 的支持更加强大，使得开发大型、复杂项目时可以受益于更好的类型检查和智能提示。Vue 3 的 Composition API 与 TypeScript 无缝集成，使得代码更加严谨和可维护。

使用 Vue 开发前端页面的优势在于其简单易用、组件化、响应式系统、性能高效和灵活性。无论是构建简单的页面还是复杂的单页应用，Vue 都能提供强大的支持，同时拥有友好的开发者工具和社区资源。

🚀二、上机演练

任务要求：

(1)创建包含账号和密码输入框以及“登录”按钮的登录页面，
(2)当用户单击“登录”按钮时，检查是否已输入账号和密码。
(3)如果已输入，显示登录成功的提示;如果未输入，提示用户进行填写。

参考练习步骤：

(1)创建HTML结构，包括表单和输入框。
(2)引入 Vue 库。
(3)创建 Vue 实例，并定义 username 和password 数据属性。
(4)定义login 方法，实现登录逻辑。
(5)将 Vue 实例挂载到 DOM 元素上。
(6)添加CSS样式以美化页面(可选)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <!-- 引入 Vue 库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>Login</h1>
        <!-- 创建表单，绑定 submit 事件 -->
        <form @submit.prevent="login">
            <!-- 账号输入框 -->
            <label for="username">Username:</label>
            <input type="text" id="username" v-model="username" required><br>

            <!-- 密码输入框 -->
            <label for="password">Password:</label>
            <input type="password" id="password" v-model="password" required><br>

            <!-- “登录”按钮 -->
            <button type="submit">Login</button>
        </form>
    </div>

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

        const App = {
            setup() {
                // 使用 ref 定义 reactive 变量
                const username = ref('');
                const password = ref('');

                // 定义 login 方法
                const login = () => {
                    if (username.value && password.value) {
                        alert('Logged in successfully!');
                    } else {
                        alert('Please enter both username and password.');
                    }
                };

                // 返回数据和方法供模板使用
                return { username, password, login };
            }
        };

        // 创建并挂载 Vue 实例到 DOM 元素上
        createApp(App).mount('#app');
    </script>
</body>
</html>