【愚公系列】《循序渐进Vue.js 3.x前端开发实践》009-Vue 模板与应用：小结与上机演练

🚀前言

基于 Vue 的模板语法深入探讨了 Vue 框架中的模板插值、模板指令等关键技术，并详细介绍了如何利用 Vue 实现组件的条件渲染和循环渲染。这些内容构成了Vue 框架的核心部分，仅仅掌握这些技术，便能在前端网页开发中显著提升效率。

🚀一、小结与上机演练

🔎1.Vue 是如何实现组件与数据间的绑定的?

Vue 通过响应式系统实现组件与数据之间的双向绑定。在 Vue 中，当数据发生变化时，组件会自动更新。其核心机制基于 “数据劫持” 和 “依赖追踪”。接下来，我们详细解析 Vue 是如何实现这一绑定的。

🦋1.1 Vue 的响应式系统

Vue 3 使用 Proxy 实现响应式数据绑定，而 Vue 2 使用了 Object.defineProperty 进行数据劫持。Vue 的响应式系统主要包括以下过程：

1. 数据劫持： Vue 将对象或数组的属性劫持（或代理），监听它们的变化。
2. 依赖追踪： 当模板中使用数据时，Vue 会记录这些数据与模板中的组件或 DOM 之间的依赖关系。
3. 自动更新： 当数据发生变化时，Vue 会自动触发重新渲染，更新与数据绑定的组件。

🦋1.2 数据绑定的两种模式

1. 单向绑定（One-Way Binding）：
   • 数据从组件的数据源传递到 DOM。
   • 使用 {{}} 模板语法或 v-bind 指令将数据绑定到视图。

示例：

<div>{{ message }}</div>  <!-- message 值变化时，视图会自动更新 -->

1. 双向绑定（Two-Way Binding）：
   • Vue 通过 v-model 指令实现双向绑定。双向绑定意味着数据在组件与视图之间可以同步更新。

示例：

<input v-model="inputValue" />
<p>当前输入：{{ inputValue }}</p>

• 当用户在输入框输入内容时，inputValue 会更新；反之，inputValue 的改变也会同步到输入框中。

🦋1.3 Vue 3 中的响应式实现

☀️1.3.1 使用 ref 创建响应式数据

ref 是 Vue 3 中用于创建基本类型数据的响应式容器。它会自动监听其值的变化，并触发组件的更新。

示例：

import { ref } from 'vue';

const counter = ref(0);
const increment = () => {
    counter.value++;
};

• 绑定数据：ref 返回一个对象，其值保存在 .value 属性中。
• 视图中使用：<div>{{ counter }}</div> <button @click="increment">增加</button>

☀️1.3.2 使用 reactive 创建响应式对象

对于复杂对象，Vue 3 使用 reactive 将对象转换为响应式数据。

示例：

import { reactive } from 'vue';

const state = reactive({
    count: 0,
    message: 'Hello Vue'
});

• reactive 将整个对象包裹，使其内部的所有属性都变为响应式。

🦋1.4 响应式原理：依赖追踪与触发更新

1. 依赖追踪：
   • 当模板中使用响应式数据时，Vue 会将该数据与组件建立依赖关系。这个过程在 Vue 内部由 Dep 和 Watcher（Vue 2）或 effect（Vue 3）来管理。
2. 触发更新：
   • 当响应式数据发生变化时，Vue 会通过发布-订阅模式触发与该数据相关的组件更新。

简单模拟实现：

let activeEffect = null;

function reactive(target) {
    const handler = {
    get(obj, key) {
        if (activeEffect) {
        // 记录依赖
        track(obj, key);
        }
        return obj[key];
    },
    set(obj, key, value) {
        obj[key] = value;
        // 触发更新
        trigger(obj, key);
        return true;
    }
    };
    return new Proxy(target, handler);
}

function track(obj, key) {
    console.log(`依赖追踪: ${key}`);
}

function trigger(obj, key) {
    console.log(`触发更新: ${key}`);
}

🦋1.5 模板与数据的绑定

Vue 将模板解析为 虚拟 DOM（VNode），并在首次渲染时将虚拟 DOM 与真实 DOM 绑定在一起。当数据发生变化时，Vue 会通过比较新旧虚拟 DOM（diff 算法），更新发生变化的部分，而不会重新渲染整个页面。

🦋1.6 总结

• Vue 的响应式系统使得数据和视图之间的绑定变得简单、高效。
• 使用 ref 和 reactive 创建响应式数据，并通过 v-model 实现双向绑定。
• Vue 通过 依赖追踪 和 自动更新 实现数据变化时的视图更新，确保页面与数据的同步。

通过这些机制，Vue 实现了组件和数据之间的动态绑定，使开发者能够更高效地构建响应式用户界面。

🔎2.在Vue 中，v-if和 v-show是两种条件渲染指令，它们各自如何使用，又有哪些异同。

在 Vue 中，v-if 和 v-show 都是用于条件渲染的指令，但它们的实现方式和使用场景有所不同。

🦋2.1 使用方法

☀️2.1.1 v-if

v-if 用于根据条件决定是否创建和销毁元素。

示例：

<div v-if="isVisible">显示内容</div>

• 创建/销毁 DOM 元素： 当 isVisible 为 true 时，div 元素将被创建；为 false 时，div 元素将从 DOM 中完全移除。

☀️2.1.2 v-show

v-show 通过控制元素的 CSS display 样式来实现元素的显示或隐藏。

示例：

<div v-show="isVisible">显示内容</div>

• 切换 display 样式： 当 isVisible 为 true 时，div 的 display 样式为 block；为 false 时，display 样式为 none。

🦋2.2 异同点

☀️2.2.1 *相同点**

• 都是用于条件渲染的指令。
• 都可以通过布尔值表达式来控制元素的显示状态。

☀️2.2.2 不同点

🦋2.3 选择建议

• 使用 v-if：
  • 条件在渲染时确定（如页面加载时）或切换频率低。
  • 不希望在页面上创建不需要的 DOM 元素，需更高的性能优化。
• 使用 v-show：
  • 需要频繁切换显示状态（如频繁点击切换）。
  • 元素在初始渲染时就存在，但会有显示或隐藏状态的需求。

通过理解这两者的区别，可以根据具体的性能和渲染需求选择合适的条件渲染方式。

🔎3.Vue 中的模板插值如何使用，它是否支持直接插入HTML 文本?

在 Vue 中，模板插值是将数据插入到 HTML 模板中的一种方式，通常通过双大括号 {{}} 的语法来使用。模板插值允许将 Vue 实例中的数据动态地显示在页面上。

🦋3.1 *模板插值的基本用法**

示例：

<div>{{ message }}</div>

• 这里，message 是 Vue 组件中的一个变量，插值会将 message 的值插入到页面中，并渲染为普通文本。

🦋3.2 插值的表达式

Vue 允许在插值中使用 JavaScript 表达式：

<div>{{ message.toUpperCase() }}</div>
<div>{{ 1 + 1 }}</div>

• 在插值中可以进行简单的运算、调用函数或处理逻辑。

🦋3.3 插入 HTML 文本

Vue 的模板插值默认是安全的，即插值内容会被作为纯文本处理，不会解释为 HTML，从而防止 XSS（跨站脚本攻击）。但 Vue 也提供了插入 HTML 的功能，通过使用 v-html 指令。

☀️3.3.1 v-html 指令

v-html 可以将 HTML 代码作为内容插入，并将其解析为真正的 HTML 元素。

示例：

<div v-html="htmlContent"></div>

• 这里，htmlContent 是 Vue 实例中的变量，假设其值为 <strong>加粗的文本</strong>，那么在页面中会被渲染为加粗的文本。
• 需要注意的是，v-html 直接插入 HTML 存在 XSS 攻击的风险，因此使用时应确保插入的内容是可信的，或进行必要的过滤。

🦋3.4 模板插值与 HTML 插入的区别

• 模板插值（{{}}）：将内容作为纯文本处理，不会解析为 HTML。
• v-html：允许直接插入和解析 HTML 内容，但使用时需要小心安全风险。

🦋3.5 示例：模板插值与 HTML 插入

<div>{{ message }}</div> <!-- 纯文本显示，不解析为HTML -->
<div v-html="htmlContent"></div> <!-- 解析为HTML并插入 -->

假设 Vue 实例中的数据如下：

const app = Vue.createApp({
    data() {
        return {
            message: "<strong>不会加粗的文本</strong>",
            htmlContent: "<strong>加粗的文本</strong>"
        }
    }
}).mount('#app')

• 第一个 div 会显示 "<strong>不会加粗的文本</strong>"，因为它是通过模板插值显示纯文本。
• 第二个 div 会显示 加粗的文本，因为 v-html 解析了 HTML 标签并将其作为真实的 DOM 元素插入。

🦋3.6 总结

• Vue 中使用双大括号 {{}} 进行模板插值时，数据会作为纯文本处理，无法解析 HTML 标签。
• 如果需要插入和解析 HTML 内容，可以使用 v-html，但要谨慎以防安全风险，例如 XSS 攻击。🚀二、创建一个简单的 Vue 模板

任务要求

1. 创建一个 Vue 应用，展示一个包含账号和密码输入框的登录表单。
2. 使用 Vue 模板语法渲染表单。
3. 添加表单验证功能，确保账号和密码字段不为空。
4. 用户单击“登录”按钮时，显示提示信息，反馈登录成功或失败。

参考练习步骤

1. 创建一个新的 HTML 文件，并引入 Vue 库。
2. 在 HTML 中创建一个 <div> 元素，设置其 id 为 app，作为 Vue 应用的挂载点。
3. 在 <script> 标签内，创建 Vue 实例，定义 username 和 password 数据属性。
4. 定义 login 方法，处理登录逻辑。
5. 使用 Vue 模板语法创建输入框和“登录”按钮。
6. 对输入框使用 v-model 指令，实现数据双向绑定。
7. 为“登录”按钮添加事件监听器，单击时调用 login 方法。
8. 运行 Vue 应用，检查结果。

参考示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Template Exercise</title>
    <!-- 引入 Vue 库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!-- 创建 Vue 应用的挂载点 -->
    <div id="app">
        <h1>Login Form</h1>
        <!-- 使用 Vue 模板语法创建输入框和“登录”按钮 -->
        <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 @click="login">Login</button>
        <p>{{ message }}</p>
    </div>

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

        const App = {
            setup() {
                // 使用 ref 定义响应式变量
                const username = ref('');
                const password = ref('');
                const message = ref('');

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

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

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

通过本例，你将学习到如何在Vue 中利用模板语法创建简洁的用户界面，并实现基础的用户交互处理。此外，你可以通过扩展这个练习，尝试增加表单验证、错误提示等功能，这将有助于你更深入地理解 Vue 模板的运用。