在Web前端开发领域，Vue.js凭借其轻量、易用、高效的特性，成为众多开发者的首选框架之一。无论是前端新手入门，还是资深开发者构建复杂项目，Vue.js都能提供强大的支持。本文将围绕Vue.js学习的完整路径，从基础铺垫（JavaScript、ES6、Flex布局）到Vue.js核心特性、项目化开发、组件通信、路由、网络请求，再到实战项目，进行万字详细拆解，帮助你系统掌握Vue.js，轻松应对前端开发需求。

一、基础铺垫：JavaScript与ES6+核心知识

Vue.js基于JavaScript构建，而ES6及以上版本的语法为Vue.js的开发提供了更便捷的支持。在学习Vue.js之前，扎实掌握JavaScript基础和ES6核心特性，能让你在后续学习中事半功倍。同时，Flex布局作为前端常用的布局方案，在Vue项目的页面构建中也高频使用，本节将同步梳理相关知识。

1.1 JavaScript核心基础回顾

JavaScript是Web前端的三大核心技术之一（HTML、CSS、JavaScript），负责实现页面的交互逻辑。对于Vue.js开发而言，以下核心知识点必须熟练掌握：

1.1.1 变量与数据类型

JavaScript中的变量声明关键字有var、let、const，其中let和const是ES6新增的，解决了var的变量提升、作用域混乱等问题。数据类型分为基本数据类型（String、Number、Boolean、Null、Undefined、Symbol、BigInt）和引用数据类型（Object、Array、Function等）。

示例代码：

// var声明（存在变量提升，不推荐） var name = "张三"; // let声明（块级作用域，无变量提升） let age = 20; // const声明（常量，块级作用域，声明时必须赋值） const gender = "男"; // 基本数据类型 let str = "hello"; let num = 100; let isTrue = true; let nul = null; let und = undefined; let sym = Symbol("unique"); // 引用数据类型 let obj = { name: "李四", age: 22 }; let arr = [1, 2, 3, 4]; let fn = function() { console.log("函数"); };

注意：基本数据类型存储在栈内存中，赋值时直接拷贝值；引用数据类型存储在堆内存中，变量存储的是堆内存的地址，赋值时拷贝的是地址，因此会出现“浅拷贝”问题，这在Vue.js的数据处理中需要特别注意。

1.1.2 函数与this指向

函数是JavaScript的核心概念，也是Vue.js中methods、计算属性等的基础。函数的声明方式有函数声明、函数表达式、箭头函数（ES6新增）。this指向是JavaScript的难点，不同的调用方式this指向不同：

• 普通函数调用：this指向window（浏览器环境）或global（Node环境）；

• 对象方法调用：this指向调用该方法的对象；

• 构造函数调用：this指向新创建的实例对象；

• call、apply、bind调用：this指向第一个参数指定的对象；

• 箭头函数：没有自己的this，this指向外层作用域的this。

示例代码：

// 函数声明 function add(a, b) { return a + b; } // 函数表达式 let subtract = function(a, b) { return a - b; }; // 箭头函数 let multiply = (a, b) => a * b; // this指向示例 let person = { name: "王五", sayName: function() { console.log(this.name); // 指向person对象，输出"王五" }, sayNameArrow: () => { console.log(this.name); // 指向window，输出undefined（浏览器环境） } }; person.sayName(); // 王五 person.sayNameArrow(); // undefined

1.1.3 数组方法

数组是前端开发中高频使用的数据结构，Vue.js的v-for指令常用来遍历数组渲染页面。以下数组方法需要重点掌握：

• 遍历方法：forEach、map、filter、some、every；

• 修改方法：push、pop、shift、unshift、splice、sort、reverse；

• 其他方法：concat、slice、join、indexOf、includes。

示例代码：

let arr = [1, 2, 3, 4, 5]; // forEach：遍历数组，无返回值 arr.forEach(item => console.log(item)); // 1 2 3 4 5 // map：遍历数组，返回新数组（对每个元素处理后） let newArr = arr.map(item => item * 2); console.log(newArr); // [2,4,6,8,10] // filter：过滤数组，返回满足条件的新数组 let filterArr = arr.filter(item => item > 3); console.log(filterArr); // [4,5] // push：向数组末尾添加元素 arr.push(6); console.log(arr); // [1,2,3,4,5,6] // splice：删除/添加/替换元素（会修改原数组） arr.splice(2, 1); // 从索引2开始，删除1个元素 console.log(arr); // [1,2,4,5,6]

1.2 掌握ES6基础核心特性

ES6（ECMAScript 2015）是JavaScript的重要版本更新，引入了众多新特性，极大地提升了开发效率。Vue.js的源码和日常开发中大量使用ES6特性，以下是必须掌握的核心内容：

1.2.1 let与const

如1.1.1所述，let和const解决了var的缺陷，具有块级作用域（{}内为块级作用域）、无变量提升、不能重复声明的特点。const声明的常量不能重新赋值，但如果是引用数据类型，其内部属性可以修改。

示例代码：

if (true) { let a = 10; const b = 20; // let a = 20; // 报错：重复声明 // b = 30; // 报错：常量不能重新赋值 const obj = { name: "赵六" }; obj.name = "孙七"; // 允许：修改引用数据类型内部属性 console.log(obj.name); // 孙七 } console.log(a); // 报错：a未定义（块级作用域外部无法访问）

1.2.2 箭头函数

箭头函数是ES6新增的函数声明方式，语法简洁，且解决了this指向混乱的问题。其语法格式为：(参数) => 函数体。

注意事项：

• 如果参数只有一个，可以省略括号；

• 如果函数体只有一条语句，可以省略大括号和return，语句的结果即为返回值；

• 箭头函数不能作为构造函数，不能使用new关键字；

• 箭头函数没有arguments对象，可使用剩余参数（...）替代。

示例代码：

// 无参数 let fn1 = () => console.log("无参数箭头函数"); fn1(); // 单个参数 let fn2 = num => num * 2; console.log(fn2(5)); // 10 // 多个参数 let fn3 = (a, b) => { let sum = a + b; return sum; }; console.log(fn3(3, 4)); // 7 // 剩余参数 let fn4 = (...args) => { console.log(args); // 接收所有参数，返回数组 }; fn4(1, 2, 3); // [1,2,3]

1.2.3 解构赋值

解构赋值是一种快速从数组或对象中提取数据的语法，简化了变量的声明和赋值过程，在Vue.js中常用于获取props、state等数据。

1.2.3.1 数组解构

数组解构按索引顺序提取数据，可使用默认值，也可跳过不需要的元素。

let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 // 跳过元素 let [d, , f] = [4, 5, 6]; console.log(d, f); // 4 6 // 默认值 let [g, h = 10] = [7]; console.log(g, h); // 7 10 // 剩余参数解构 let [i, ...j] = [8, 9, 10]; console.log(i, j); // 8 [9,10]

1.2.3.2 对象解构

对象解构按属性名提取数据，属性名必须与变量名一致，可使用别名和默认值。

let person = { name: "周八", age: 25, gender: "男" }; // 基本解构 let { name, age } = person; console.log(name, age); // 周八 25 // 别名 let { gender: g } = person; console.log(g); // 男 // 默认值 let { address = "北京" } = person; console.log(address); // 北京 // 嵌套对象解构 let user = { info: { id: 1, username: "vue123" } }; let { info: { id, username } } = user; console.log(id, username); // 1 vue123

1.2.4 模板字符串

模板字符串使用反引号（`）包裹，可直接换行，也可通过${}插入变量或表达式，简化了字符串的拼接操作。

let name = "吴九"; let age = 28; // 普通字符串拼接 let str1 = "姓名：" + name + "，年龄：" + age; // 模板字符串 let str2 = `姓名：${name}，年龄：${age}`; console.log(str2); // 姓名：吴九，年龄：28 // 多行字符串 let str3 = `这是第一行 这是第二行 这是第三行`; console.log(str3);

1.2.5 展开运算符与剩余参数

展开运算符（...）和剩余参数（...）语法相同，但用途相反。展开运算符用于将数组或对象展开为多个元素或属性，剩余参数用于将多个参数收集为一个数组。

1.2.5.1 展开运算符

// 数组展开 let arr1 = [1, 2, 3]; let arr2 = [4, 5, ...arr1]; console.log(arr2); // [4,5,1,2,3] // 对象展开（ES2018特性） let obj1 = { a: 1, b: 2 }; let obj2 = { c: 3, ...obj1 }; console.log(obj2); // {c:3,a:1,b:2} // 函数参数展开 function add(a, b, c) { return a + b + c; } let arr3 = [10, 20, 30]; console.log(add(...arr3)); // 60

1.2.5.2 剩余参数

// 函数参数收集 function sum(...args) { return args.reduce((total, item) => total + item, 0); } console.log(sum(1, 2, 3, 4)); // 10 // 解构时收集剩余元素 let [a, ...b] = [1, 2, 3, 4]; console.log(b); // [2,3,4]

1.2.6 模块化（import/export）

ES6模块化是前端模块化的标准方案，允许将代码分割为多个文件，每个文件为一个模块，通过import和export实现模块间的通信。Vue.js项目中，组件、工具函数等均通过模块化方式组织。

1.2.6.1 export（导出）

导出分为命名导出和默认导出。命名导出可导出多个，默认导出只能导出一个。

// 命名导出（方式1） export const name = "模块化测试"; export function fn() { return "命名导出函数"; } // 命名导出（方式2） const age = 30; const gender = "男"; export { age, gender }; // 默认导出 export default { id: 1, msg: "默认导出对象" };

1.2.6.2 import（导入）

导入时，命名导出需使用{}包裹，名称需与导出一致；默认导出可自定义名称，无需{}。

// 导入命名导出 import { name, fn, age, gender } from "./module.js"; console.log(name, age, gender); console.log(fn()); // 导入默认导出 import obj from "./module.js"; console.log(obj); // 重命名导入 import { name as userName } from "./module.js"; console.log(userName); // 导入所有命名导出 import * as moduleAll from "./module.js"; console.log(moduleAll.name, moduleAll.age);

1.3 Flex布局思维导图与详细解析

Flex布局（弹性布局）是一种一维的布局模型，能够灵活地分配容器内元素的空间，适配不同屏幕尺寸，是Vue项目中页面布局的首选方案。以下通过思维导图框架+详细解析的方式，全面掌握Flex布局。

1.3.1 Flex布局思维导图核心框架

• Flex布局

  • 核心概念

    • Flex容器（父元素）

    • Flex项目（子元素）

    • 主轴（默认水平）

    • 交叉轴（默认垂直）

  • 容器属性（父元素）

    • flex-direction：设置主轴方向

    • flex-wrap：设置是否换行

    • flex-flow：direction+wrap的简写

    • justify-content：主轴对齐方式

    • align-items：交叉轴对齐方式

    • align-content：多根轴线对齐方式

  • 项目属性（子元素）

    • flex-grow：项目放大比例

    • flex-shrink：项目缩小比例

    • flex-basis：项目在主轴上的初始尺寸

    • flex：grow+shrink+basis的简写

    • align-self：单个项目交叉轴对齐方式

    • order：项目排列顺序

1.3.2 Flex布局详细解析

1.3.2.1 核心概念

要使用Flex布局，需先给父元素设置display: flex或display: inline-flex，此时父元素成为Flex容器，子元素自动成为Flex项目。容器内存在两条轴：主轴（main axis）和交叉轴（cross axis），项目默认沿主轴排列。

1.3.2.2 容器属性（父元素）

1. flex-direction：设置主轴方向决定主轴的方向，即项目的排列方向，取值如下：.container { display: flex; flex-direction: column; /* 主轴垂直 */ }

   1. row（默认）：主轴水平，从左到右；

   2. row-reverse：主轴水平，从右到左；

   3. column：主轴垂直，从上到下；

   4. column-reverse：主轴垂直，从下到上。

2. flex-wrap：设置是否换行默认情况下，项目会在主轴上排列成一行，若空间不足，项目会被压缩。flex-wrap控制项目是否换行，取值如下：

   1. nowrap（默认）：不换行，项目压缩；

   2. wrap：换行，第一行在上方；

   3. wrap-reverse：换行，第一行在下方。

3. flex-flow：简写属性flex-direction和flex-wrap的简写，默认值为row nowrap。.container { flex-flow: row wrap; /* 主轴水平，自动换行 */ }

4. justify-content：主轴对齐方式控制项目在主轴上的对齐方式，取值如下（以主轴水平为例）：

   1. flex-start（默认）：左对齐；

   2. flex-end：右对齐；

   3. center：居中对齐；

   4. space-between：两端对齐，项目之间间距相等；

   5. space-around：项目两侧间距相等，总间距为项目间间距的2倍；

   6. space-evenly：项目之间及两端间距相等。

5. align-items：交叉轴对齐方式控制项目在交叉轴上的对齐方式，取值如下（以交叉轴垂直为例）：

   1. flex-start：上对齐；

   2. flex-end：下对齐；

   3. center：居中对齐；

   4. baseline：项目的第一行文字基线对齐；

   5. stretch（默认）：项目未设置高度时，占满容器高度。

6. align-content：多根轴线对齐方式当项目换行后，会产生多根主轴（轴线），align-content控制多根轴线的对齐方式，若项目未换行，该属性无效。取值与justify-content类似，新增stretch（默认，轴线占满容器高度）。

1.3.2.3 项目属性（子元素）

1. flex-grow：项目放大比例默认值为0，即不放大。若容器有剩余空间，按比例分配给项目。例如，三个项目的flex-grow分别为1、2、3，则剩余空间按1:2:3分配。.item1 { flex-grow: 1; } .item2 { flex-grow: 2; } .item3 { flex-grow: 3; }

2. flex-shrink：项目缩小比例默认值为1，即空间不足时缩小。若取值为0，项目不缩小。

3. flex-basis：项目初始尺寸设置项目在主轴上的初始尺寸，默认值为auto（项目自身尺寸）。可设置具体数值（如300px）。

4. flex：简写属性flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto。常用取值：flex: 1（即1 1 auto，自动放大缩小）、flex: none（即0 0 auto，不放大不缩小）。.item { flex: 1; /* 等价于 flex-grow:1; flex-shrink:1; flex-basis:auto; */ }

5. align-self：单个项目对齐方式覆盖容器的align-items属性，为单个项目设置交叉轴对齐方式，取值与align-items相同。.item2 { align-self: center; /* 单个项目居中对齐 */ }

6. order：项目排列顺序默认值为0，数值越小，排列越靠前。可设置负数。.item1 { order: -1; } /* 排在最前面 */ .item3 { order: 2; } /* 排在最后面 */

1.4 考核方案（基础铺垫阶段）

基础铺垫阶段的考核旨在检验JavaScript、ES6及Flex布局的掌握程度，为后续Vue.js学习奠定基础。考核分为理论笔试和实操编程两部分，具体方案如下：

1.4.1 考核目标

• 熟练掌握JavaScript核心基础（变量、函数、数组等）；

• 掌握ES6核心特性的使用场景和语法；

• 能够使用Flex布局完成常见页面布局。

1.4.2 考核内容与分值

1. 理论笔试（40分，60分钟）

   1. 选择题（10题，每题2分，共20分）：考查变量声明、this指向、ES6特性、Flex布局概念等；

   2. 简答题（2题，每题10分，共20分）：如“简述let与var的区别”“简述Flex布局的核心概念及常用容器属性”。

2. 实操编程（60分，90分钟）

   1. JavaScript数组处理（20分）：给定数组，使用数组方法完成过滤、映射、求和等操作；

   2. ES6特性应用（20分）：使用解构赋值、箭头函数、模板字符串、模块化等特性完成指定功能；

   3. Flex布局实操（20分）：使用Flex布局完成一个响应式页面布局（如导航栏、卡片列表等）。

1.4.3 评分标准

• 理论笔试：选择题答案正确得分，简答题按知识点完整性、准确性评分；

• 实操编程：功能实现完整性（60%）、代码规范性（20%）、性能优化（10%）、注释清晰度（10%）。

1.4.4 合格标准

总分≥60分为合格，其中实操编程部分不得低于36分（即60%）。未合格者需重新学习并参加补考。

二、Vue.js入门：从环境搭建到第一个实例

Vue.js是一套用于构建用户界面的渐进式框架，其核心只关注视图层，易于上手，同时也能与其他库或现有项目整合。本节将从Web前端开发概述入手，介绍Vue.js的核心优势，然后带领大家搭建开发环境，编写第一个Vue实例，完成入门基础学习。

2.1 学习指南

2.1.1 学习目标

• 了解Web前端开发的发展历程和Vue.js的定位；

• 掌握Vue.js的引入方式和开发环境搭建；

• 理解Vue.js的核心思想（数据驱动、组件化）；

• 能够编写简单的Vue实例，实现数据绑定和基本交互。

2.1.2 学习资源推荐

• 官方文档：Vue.js 2.x 官方文档（权威、详细，入门首选）；

• 视频教程：Vue.js官方视频、B站尚硅谷/Vue技术胖Vue入门教程；

• 实战项目：官方示例项目、简单 TodoList 应用。

2.1.3 学习建议

• 先理解核心概念，再动手实践，避免死记硬背；

• 多写代码，通过实操巩固知识点；

• 遇到问题先查阅官方文档，培养自主解决问题的能力；

• 结合基础铺垫阶段的JavaScript、ES6知识，理解Vue.js的语法逻辑。

2.2 Web前端开发概述

2.2.1 前端开发发展历程

1. 静态页面阶段：早期Web以展示信息为主，页面为静态HTML，无交互或简单交互（通过JavaScript实现）；

2. 动态页面阶段：后端渲染动态HTML（如JSP、PHP），前端负责页面展示，后端负责逻辑处理；

3. 前后端分离阶段：前端通过AJAX与后端进行数据交互，前端负责页面渲染和交互逻辑，后端负责提供API接口。此时出现了Angular、React、Vue等前端框架，提升了前端开发效率和项目可维护性。

2.2.2 Vue.js的定位与优势

Vue.js是渐进式前端框架，“渐进式”意味着可以根据项目需求逐步引入其功能模块，无需一次性使用全部特性。其核心优势如下：

• 易用性：语法简洁，学习曲线平缓，新手容易上手；

• 轻量性：核心库体积小（约20KB min+gzip），加载速度快；

• 数据驱动：采用数据驱动视图，无需手动操作DOM，减少了DOM操作的复杂性；

• 组件化：支持组件化开发，组件可复用，提高开发效率和代码可维护性；

• 灵活性：可与其他库（如jQuery、Element UI）或现有项目整合；

• 强大的生态：拥有Vue Router（路由）、Vuex（状态管理）、Vue CLI（脚手架）等配套工具，可满足复杂项目需求。

2.2.3 Vue.js的应用场景

Vue.js适用于各种Web应用开发，包括：

• 小型应用：如个人博客、简单的管理后台；

• 中型应用：如企业官网、电商平台前端；

• 大型应用：如复杂的管理系统、移动端应用（通过Vue Native或Uni-app）。

2.3 第一个Vue实例

2.3.1 Vue.js的引入方式

Vue.js的引入方式有两种：直接引入（适合入门学习）和通过Vue CLI搭建项目（适合实际开发）。本节先介绍直接引入方式。

2.3.1.1 CDN引入

直接通过CDN链接引入Vue.js，无需下载安装。推荐使用官方CDN或国内镜像（如bootcdn）。

<!-- 开发环境版本，包含完整的警告和调试模式 --> <!-- 生产环境版本，体积更小，去除了警告 -->

2.3.1.2 本地引入

从Vue.js官方网站下载Vue.js文件，保存到本地项目中，然后通过相对路径引入。

下载地址：Vue.js 2.x 下载页面

2.3.2 编写第一个Vue实例

创建一个HTML文件，引入Vue.js后，编写如下代码：

<!DOCTYPE html> 第一个Vue实例<!-- Vue挂载点：Vue实例将控制该元素内的内容 --> <!-- 数据绑定：将Vue实例中的message数据渲染到页面 --> {{ message }}姓名：{{ name }}年龄：{{ age }}<!-- 事件绑定：点击按钮触发changeName方法 --> <button @">修改姓名

2.3.3 实例核心知识点解析

1. Vue实例创建：通过new Vue()创建Vue实例，接收一个配置对象。

2. el（挂载点）：指定Vue实例要控制的DOM元素，值为CSS选择器（如#app、.container）。一个Vue实例只能控制一个挂载点，挂载点内的内容可使用Vue的语法。

3. data（数据）：存储Vue实例的数据，是一个对象。数据可在页面中通过插值语法（{{ 数据名 }}）渲染，也可在方法中通过this访问。

4. methods（方法）：存储Vue实例的方法，是一个对象。方法可通过事件绑定（如@click）触发，方法内部可通过this访问data中的数据和其他方法。

5. 数据驱动视图：当data中的数据发生变化时，页面中使用该数据的地方会自动更新，无需手动操作DOM。这是Vue.js的核心特性之一，极大地简化了交互逻辑的编写。

2.3.4 实例运行与调试

将编写好的HTML文件用浏览器打开，即可看到页面效果：页面显示“Hello Vue!”“姓名：张三”“年龄：20”，点击“修改姓名”按钮，姓名会变为“李四”。

调试技巧：在浏览器开发者工具（F12）的Console面板中，可直接访问Vue实例（如vm），查看或修改data中的数据（如vm.name = '王五'），实时观察页面变化，便于调试。

2.4 章节测试（Vue.js入门阶段）

2.4.1 测试目标

• 了解Vue.js的核心优势和应用场景；

• 掌握Vue.js的引入方式；

• 理解Vue实例的核心配置（el、data、methods）；

• 能够编写简单的Vue实例，实现数据绑定和事件绑定。

2.4.2 测试题目

1. 选择题（每题5分，共20分）

   1. Vue.js的核心特性不包括以下哪一项？（ ） A. 数据驱动 B. 组件化 C. 后端渲染 D. 轻量性

   2. 以下哪种是Vue.js的正确引入方式？（ ） A. B. C. <import src="vue.js"> D. <require src="vue.js">

   3. Vue实例中，用于指定控制的DOM元素的配置项是？（ ） A. data B. el C. methods D. props

   4. 以下关于Vue数据驱动视图的说法，正确的是？（ ） A. 数据变化后，需要手动更新页面 B. 页面变化后，数据会自动更新 C. 数据变化后，页面会自动更新 D. 数据和页面无关联

2. 简答题（10分） 简述Vue实例的核心配置项el、data、methods的作用。

3. 实操题（20分） 编写一个Vue实例，实现以下功能：

   1. 页面显示一个计数器，初始值为0；

   2. 提供两个按钮，分别为“+1”和“-1”；

   3. 点击“+1”按钮，计数器加1；点击“-1”按钮，计数器减1。

2.4.3 参考答案

1. 选择题：1.C 2.A 3.B 4.C

2. 简答题：

   1. el：指定Vue实例要控制的DOM元素，值为CSS选择器；

   2. data：存储Vue实例的数据，供页面渲染和方法使用；

   3. methods：存储Vue实例的方法，可通过事件绑定触发，用于处理交互逻辑。

3. 实操题参考代码： <!DOCTYPE html> 计数器计数器：{{ count }}<button @+1<button @decrement">-1

三、Vue.js基础特性：深入理解数据与交互

Vue.js的基础特性是构建前端应用的核心，包括Vue实例的构造选项、数据对象、方法、指令、事件修饰符、计算属性、监听属性和过滤器等。掌握这些特性，能够实现更复杂的页面交互和数据处理逻辑。本节将对这些基础特性进行详细拆解，结合实例帮助大家深入理解和应用。

3.1 学习指南

3.1.1 学习目标

• 掌握Vue实例常用构造选项的作用和使用方法；

• 理解data数据对象的响应式原理；

• 熟练使用methods方法处理交互逻辑；

• 掌握Vue常用指令的语法和应用场景；

• 理解事件修饰符的作用，能够正确使用；

• 掌握计算属性、监听属性的使用，理解其区别；

• 能够使用过滤器处理数据格式化。

3.1.2 学习重点与难点

• 重点：常用指令（v-text、v-html、v-bind、v-model、v-for、v-if/v-show）、计算属性、事件修饰符；

• 难点：data数据的响应式原理、计算属性与监听属性的区别、v-for与v-if的优先级问题。

3.1.3 学习建议

• 结合实例学习每个特性，通过代码实操理解语法和作用；

• 深入理解响应式原理，这是Vue.js数据驱动的核心；

• 对比学习相似特性（如v-if与v-show、计算属性与监听属性），明确其适用场景；

• 多做练习，通过实际需求巩固知识点的应用。

3.2 Vue实例常用到的构造选项

Vue实例的构造选项是创建Vue实例时传入的配置对象中的属性，用于定义实例的行为和特性。除了前面介绍的el、data、methods，还有以下常用构造选项：

3.2.1 computed（计算属性）

用于定义依赖于其他数据的计算属性，计算属性会根据依赖的数据自动更新，且具有缓存机制（依赖数据不变时，多次访问不会重新计算）。

new Vue({ el: '#app', data: { num1: 10, num2: 20 }, computed: { // 计算属性：求和 sum() { return this.num1 + this.num2; } } });

页面中使用：{{ sum }}，当num1或num2变化时，sum会自动更新。

3.2.2 watch（监听属性）

用于监听data中数据的变化，当数据变化时触发对应的处理函数，可用于处理复杂的逻辑（如数据变化后的异步操作）。

new Vue({ el: '#app', data: { message: 'Hello' }, watch: { // 监听message的变化 message(newVal, oldVal) { console.log(`数据从${oldVal}变为${newVal}`); // 可执行异步操作，如请求接口 } } });

3.2.3 filters（过滤器）

用于对数据进行格式化处理，可在插值语法或v-bind指令中使用。过滤器分为局部过滤器（仅当前实例可用）和全局过滤器（所有实例可用）。

// 局部过滤器 new Vue({ el: '#app', data: { date: new Date() }, filters: { // 格式化日期 formatDate(value) { return value.toLocaleDateString(); } } });

页面中使用：{{ date | formatDate }}

3.2.4 created（生命周期钩子）

Vue实例的生命周期钩子函数，在实例创建完成后立即执行（此时el尚未挂载，data和methods已可用），常用于初始化数据、调用方法或发送异步请求。

new Vue({ el: '#app', data: { list: [] }, created() { // 初始化时获取数据 this.getListData(); }, methods: { getListData() { // 模拟