1. Vue.js 基础

文档摘要

Vue.js 基础教程：掌握渐进式前端框架的核心概念与实践核心摘要：Vue.js 作为现代前端开发领域最受欢迎的渐进式 JavaScript 框架之一，以其易学易用、灵活高效的特性备受开发者青睐。本文档全面解析 Vue.js 基础核心知识，涵盖渐进式框架理念、应用实例构建、模板语法、响应式系统原理以及计算属性与侦听器的应用。通过详实的代码实践与图文解析，帮助开发者快速建立 Vue3 前端开发的知识体系，为构建高性能单页应用（SPA）奠定坚实基础。一、Vue.js 简介：探索渐进式前端框架的魅力深入代码实践前，需明确 Vue.js 的核心定位及其在现代前端工程化中的独特优势。 1.1 什么是 Vue.js？ Vue.js 官方定义为渐进式 JavaScript 框架。

Vue.js 基础教程：掌握渐进式前端框架的核心概念与实践

核心摘要：Vue.js 作为现代前端开发领域最受欢迎的渐进式 JavaScript 框架之一，以其易学易用、灵活高效的特性备受开发者青睐。本文档全面解析 Vue.js 基础核心知识，涵盖渐进式框架理念、应用实例构建、模板语法、响应式系统原理以及计算属性与侦听器的应用。通过详实的代码实践与图文解析，帮助开发者快速建立 Vue3 前端开发的知识体系，为构建高性能单页应用（SPA）奠定坚实基础。

一、Vue.js 简介：探索渐进式前端框架的魅力

深入代码实践前，需明确 Vue.js 的核心定位及其在现代前端工程化中的独特优势。

1.1 什么是 Vue.js？

Vue.js 官方定义为渐进式 JavaScript 框架。“渐进式”是 Vue.js 最核心的设计哲学，意味着开发者可以根据项目规模与业务需求，按需引入框架功能。既可以将 Vue.js 作为轻量级库嵌入现有项目以增强页面交互，也能结合现代工具链（如 Vite、Vue Router、Pinia）构建复杂的企业级单页应用程序（SPA）。

Vue.js 的核心库专注于视图层（View Layer），不仅易于上手，还能无缝集成各类第三方库。当与完善的生态系统结合时，其完全具备驱动复杂前端架构的能力。

1.2 Vue.js 的核心优势

易学易用 (Approachable)：API 设计简洁直观，官方文档详尽清晰。基于 HTML 的模板语法与标准 JavaScript 深度融合，大幅降低了前端开发的学习门槛。
灵活高效 (Versatile)：支持从简单的页面组件到复杂单页应用的全场景开发。提供组件化、指令、路由、状态管理等丰富特性，完美适配不同规模的业务需求。
性能出色 (Performant)：底层采用虚拟 DOM（Virtual DOM）与高效的 Diff 算法更新机制，确保数据状态变更时视图能够精准、快速地响应，提供极致的用户体验。
庞大的社区生态 (Community Support)：拥有全球活跃的开发者社区，提供海量的开源组件库、插件与工程化工具，技术难题可快速获得社区支持。

1.3 核心概念概览

后续章节将逐步深入以下核心概念，此处作全局概览：

声明式渲染 (Declarative Rendering)：通过简洁的模板语法声明式地描述视图结构，框架自动完成数据到 DOM 的映射与渲染。
组件化系统 (Component-Based System)：鼓励将用户界面（UI）拆分为独立、可复用的组件。每个组件封装自身的 HTML、CSS 与 JavaScript 逻辑，显著提升代码的可维护性与复用率。
响应式系统 (Reactivity System)：框架的核心引擎。当底层数据发生变更时，系统自动追踪依赖关系并高效更新关联视图，实现数据驱动。

二、快速上手：构建首个 Vue.js 应用

通过以下示例，快速搭建首个 Vue.js 应用，直观体验数据驱动视图的开发模式。

2.1 引入 Vue.js 与基础配置

最快捷的入门方式是通过 CDN 链接将 Vue.js 引入 HTML 文件。


<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>首个 Vue 应用</title>
</head>
<body>
  <!-- Vue 应用挂载点 -->
  <div id="app">
    {{ message }}
  </div>
  
  <!-- 引入 Vue 3 全局构建版本 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    
    // 创建并挂载应用实例
    createApp({
      data() {
        return {
          message: '你好，Vue.js!'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

代码原理解析：

<div id="app">：作为 Vue 应用的根节点（挂载点），Vue 实例将接管该元素及其内部的所有 DOM 渲染。
{{ message }}：双花括号插值语法，用于将 data 中定义的 message 变量动态渲染为文本。
createApp({ ... })：调用全局 API 创建 Vue 应用实例，并传入配置对象。
data() 选项：返回一个包含应用状态数据的对象。此处定义了响应式属性 message。
.mount('#app')：将创建好的应用实例挂载到指定的 DOM 元素上，触发初始渲染。

在浏览器中打开该文件，页面将自动渲染出“你好，Vue.js!”。这体现了声明式渲染的核心思想：开发者只需声明数据与视图的绑定关系，框架自动处理 DOM 更新。

2.2 Vue 应用实例解析

createApp 方法返回的应用实例是 Vue 架构的入口，负责管理应用的生命周期、全局配置及组件树。

架构说明：

配置对象 (Options Object)：传入 createApp 的参数，用于定义应用行为。核心选项包括状态数据（data）、方法（methods）、计算属性（computed）、侦听器（watch）及生命周期钩子（如 mounted）。
根组件 (Root Component)：应用实例隐式创建的顶层组件，整个组件树由此展开。它包含了模板结构、业务逻辑与组件样式。

三、模板语法：声明式渲染视图的核心机制

Vue.js 采用基于 HTML 的模板语法，允许开发者声明式地将组件状态绑定至 DOM。

3.1 数据插值与属性绑定

文本插值：使用双花括号 {{ }} 渲染纯文本数据。
```
<p>{{ message }}</p>
```
原始 HTML 插值：使用 v-html 指令渲染 HTML 字符串。

安全警告：永远不要对用户提供的内容使用 v-html，这极易导致跨站脚本攻击（XSS）。
```
<p v-html="rawHtml"></p>
```

属性绑定：使用 v-bind 指令（简写为 :）动态绑定 HTML 属性。


<a v-bind:href="url">访问链接</a>
<img :src="imageUrl" alt="示例图片">

3.2 核心指令详解

指令（Directives）是带有 v- 前缀的特殊属性，用于在表达式值改变时，将响应式副作用应用于 DOM。

1. 条件渲染 (`v-if` / `v-else` vs `v-show`)

v-if：真正的条件渲染，通过销毁和重建 DOM 元素来控制显隐。适用于条件很少改变的场景。
v-show：仅切换元素的 CSS display 属性。元素始终保留在 DOM 中，适用于频繁切换显隐的场景。


<div id="app">
  <p v-if="isVisible">v-if 控制的文本</p>
  <p v-show="isShow">v-show 控制的文本</p>
  <button @click="isVisible = !isVisible">切换 v-if</button>
  <button @click="isShow = !isShow">切换 v-show</button>
</div>

<script>
  createApp({
    data() {
      return { isVisible: true, isShow: true };
    }
  }).mount('#app');
</script>

2. 列表渲染 (`v-for`)

基于数组或对象数据源渲染列表结构。


<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

最佳实践：使用 v-for 时必须提供唯一的 :key 属性。key 帮助 Vue 的虚拟 DOM 算法精准追踪节点身份，从而在列表重排时最大化复用 DOM 元素，提升渲染性能。

3. 事件监听 (`v-on`)

用于绑定 DOM 事件，简写为 @。可执行内联语句或调用方法。


<button @click="count++">计数: {{ count }}</button>
<button @mouseover="handleHover">鼠标悬停触发</button>

4. 双向数据绑定 (`v-model`)

在表单元素（如 <input>、<select>）上创建双向绑定。视图更新自动同步至数据，数据修改自动反映至视图。


<input type="text" v-model="searchQuery" placeholder="输入搜索词">
<p>实时输入内容：{{ searchQuery }}</p>

双向绑定极大简化了表单状态管理，是 Vue 提升开发效率的关键特性。

四、响应式系统：数据驱动视图的底层原理

响应式系统是 Vue.js 的灵魂。当组件数据发生变化时，视图自动更新，彻底免除了繁琐的手动 DOM 操作。

底层实现机制：

Vue 2.x：基于 Object.defineProperty 劫持对象属性的 getter 和 setter，实现依赖收集与派发更新。但存在无法监听对象属性新增/删除及数组索引修改的局限。
Vue 3.x：全面拥抱 ES6 Proxy API。Proxy 能够代理整个对象，不仅解决了 Vue 2 的监听盲区，还支持 Map、Set 等数据结构，且性能更优。

当组件挂载时，Vue 会遍历 data 返回的对象，将其转化为响应式代理。模板在渲染过程中会触发数据的 getter，从而建立“数据-视图”的依赖关系。当数据变更触发 setter 时，系统会精准通知相关依赖进行视图重绘。

五、计算属性与侦听器：复杂数据逻辑处理

针对复杂的业务逻辑，Vue 提供了 computed 和 watch 选项，以弥补基础 data 属性的不足。

5.1 计算属性 (Computed Properties)

计算属性用于声明式地描述依赖于其他响应式数据的派生值。其核心优势在于内置缓存机制：只有当依赖的响应式数据发生变化时，计算属性才会重新执行。


<p>原价: {{ price }}，折扣: {{ discount }}%</p>
<p>折后价: {{ finalPrice }}</p>

<script>
  createApp({
    data() {
      return { price: 100, discount: 20 };
    },
    computed: {
      finalPrice() {
        // 仅当 price 或 discount 变化时重新计算
        return this.price * (1 - this.discount / 100);
      }
    }
  }).mount('#app');
</script>

5.2 侦听器 (Watchers)

侦听器用于监听特定数据的变化，并执行副作用操作（如异步 API 请求、本地存储写入、复杂 DOM 操作等）。


<input v-model="keyword" placeholder="搜索关键词">
<p v-if="result">{{ result }}</p>

<script>
  createApp({
    data() {
      return { keyword: '', result: '' };
    },
    watch: {
      // 监听 keyword 变化，执行防抖搜索请求
      keyword(newVal) {
        if (!newVal) return this.result = '';
        setTimeout(() => {
          this.result = `正在展示 "${newVal}" 的搜索结果...`;
        }, 500);
      }
    }
  }).mount('#app');
</script>

5.3 计算属性 vs 侦听器选型指南

特性维度	计算属性 (Computed)	侦听器 (Watch)
核心目的	同步计算派生数据	监听数据变化，执行异步或副作用操作
返回值要求	必须返回一个计算结果	无需返回值
缓存机制	具备依赖缓存，性能高	无缓存，每次触发均执行
典型应用场景	购物车总价计算、列表数据过滤	搜索框防抖请求、路由参数监听

六、总结与进阶展望

本文档系统梳理了 Vue.js 基础核心知识，涵盖了以下关键领域：

框架定位：理解了 Vue.js 作为渐进式框架的设计理念与核心优势。
应用构建：掌握了应用实例的创建、挂载及基础配置。
模板语法：熟练运用插值表达式与核心指令（v-if、v-for、v-model 等）实现声明式视图渲染。
响应式原理：深入剖析了数据驱动视图的底层机制及 Proxy 代理的优势。
逻辑处理：明确了计算属性与侦听器的适用场景及性能差异。

掌握上述基础是迈向高级前端开发的必经之路。在后续的进阶学习中，建议深入探索组件化通信机制、Vue Router 路由管理、Pinia 全局状态管理以及 Composition API (组合式 API)。通过不断重构与优化实际项目，开发者将能充分发挥 Vue.js 的工程化潜力，构建出高性能、高可维护性的现代 Web 应用。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/136-vuejs%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流