Vue.js 入门：核心概念、MVVM 模式与适用场景解析

Vue.js 入门与学习目标

“大白话，讲编程”系列重新回归，本期我们将共同探索 Vue.js 的基础知识。没错，这正是从基础开始讲解。因此，即便你是刚入行的新手，相信也能在通俗易懂的讲解风格中掌握这些内容。

不过，建议读者具备 HTML、CSS 和 JavaScript 的项目开发经验。如果你完全没有项目实战经历，或者已经精通 Vue.js，那么这个系列可能并不适合你目前的学习阶段。

1 学习目标

通过本节内容，你将掌握以下知识点：

1. 当前前端技术的使用趋势

2. MVVM 架构的含义

3. Vue.js 的主要优点

4. Vue.js 的两大核心特性

5. Vue.js 的适用场景

Vue.js 的诞生背景

2 诞生背景

近年来，随着智能手机的普及和性能的提升，移动端 Web 需求大幅增长，催生了一种名为 WebApp（移动网页应用）的产品形态。

这些应用的功能日益复杂，交互效果也越来越炫酷，其功能与体验已逐渐接近原生 APP。例如以下案例：

（效果直逼原生APP）

这类 WebApp 不仅拥有类似 H5 营销页面的炫酷视觉效果，还包含复杂的点击、输入、下拉选择以及视图切换等交互逻辑。面对这样的业务需求，若继续沿用 PC 端的开发方案，显然不再合适。以视图切换为例：

在 PC 端，我们通常使用 <a> 标签进行页面跳转；但在移动端，这种做法会导致严重的问题，你可能会遇到如下场景：

（等到花儿都谢了）

此时用户只能等待……3 秒、5 秒、8 秒……很难想象，在一个需要频繁切换视图的 WebApp 中，使用 <a> 标签实现跳转会对用户体验造成如此大的负面影响。换作是你，恐怕也不愿忍受如此漫长的等待。

此外，在接收用户输入的同时，往往需要即时更新视图。例如，用户输入不同内容时页面随之更新，或点击不同选项显示不同状态等交互效果。一旦此类交互增多，手动操作 DOM 的代码将变得复杂且难以维护。

为了解决 WebApp 在体验和开发上的不足，我们决定学习并使用一种 MVVM 框架——Vue.js。

理解 MVVM 架构

3 什么是 MVVM

MVVM 可拆分为 View（视图）、ViewModel（视图模型）和 Model（模型）三部分，请参考下图：

那么，我们该如何理解 MVVM 呢？

上图中，左侧的 View 对应我们的 DOM 内容，即用户看到的页面视图；右侧的 Model 对应数据对象，例如一个包含具体信息的对象：

{ 

name:"张三", 
age:21,

}

而中间的 ViewModel 则负责监控两侧的数据，并相应地通知另一侧进行修改。例如：当你在 Model 层中将 name 的值修改为“李四”时，View 视图层显示的“张三”也会自动变为“李四”。这一过程由 ViewModel 自动完成，无需手动编写代码（即不再需要手动操作 DOM）。

如果你曾编写过复杂的 DOM 操作代码，就能深刻感受到这种机制带来的便利。

这就是 MVVM 框架。属于 MVVM 模式的 JS 框架除了 Vue.js 外，还有 React.js 和 Angular.js。

此处我们不具体分析这三个框架中哪一个更优。关于技术选型，每个开发团队的情况不同，考量因素也各异，只要适合自身需求即可。这里仅介绍 Vue.js 的优点：

1. Vue.js 更轻量且运行更快

2. 更容易上手，学习成本低

Vue.js 的核心特性

4 Vue 的核心

经过前面的铺垫，终于进入 Vue 核心内容的讲解。

接下来，我们来认识 Vue.js，此处引用官网的一段介绍：

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

这句话包含两个关键词：数据绑定和视图组件。

Vue 的数据驱动：数据改变会驱动视图自动更新。传统做法需要手动修改 DOM 来改变视图，而 Vue.js 只需改变数据，视图便会自动更新，一个字：爽。你无需再操心 DOM 的更新，这正是 MVVM 思想的实现。

视图组件化：将整个网页拆分为一个个区块，每个区块可视为一个组件。网页由多个组件拼接或嵌套组成。请看下图：

具体在开发中如何实现组件，以及哪些区块应划分为一个组件，将在后续章节逐一介绍。此处你只需知道，在 Vue.js 中，网页可以看作由多个组件构成即可。

Vue.js 的适用场景与限制

5 适用场景

如果你仍在频繁使用 jQuery 操作 DOM 来更新页面，那么可以使用 Vue.js 来解放你的 DOM 操作。

如果你的项目中存在多个相同部分，且可以封装为组件，那么可以尝试使用 Vue.js。

此外，Vue.js 的核心实现中使用了 ES5 的 Object.defineProperty 特性，IE8 及以下版本的浏览器不兼容。因此，如果你的项目需要兼容这些低版本浏览器，则 Vue.js 并不适用。

毕竟，开发项目的目的并非为了使用某个框架。

6 本节小结

为了更好地满足当前移动 WebApp 项目的开发需求，MVVM 框架应运而生，而 Vue.js 便是其中一种 JS 框架，其两大核心特性为：数据驱动和组件化。

来源：公众号：web前端教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。