1、Vue入门：Vue.js简介、Vue.js核心特性、MVVM模式、Vue.js与其他框架对比

1.1 什么是Vue.js？

Vue.js，读作「view」，中文社区常叫它「尤雨溪框架」。嗯，没错，就是那位中国大神尤雨溪的作品。

我第一次接触Vue是在2016年。当时公司要重构一个后台管理系统，jQuery写得太痛苦了——数据变了要手动操作DOM，改一个字段得找半天对应的标签。说实话，那会儿我差点想转行。

后来同事推荐了Vue。我抱着试试看的心态，花了一个周末看了官方文档。结果你猜怎么着？周一我就把整个项目用Vue重写了。不是我夸张，是Vue真的太「懂」前端开发者的痛点了。

Vue.js是一个用于构建用户界面的渐进式JavaScript框架。什么叫「渐进式」？说白了，就是你可以按需使用。想简单用就用一个CDN链接，想做大项目就配合全家桶。不像某些框架，一上来就要你学一堆概念。

核心定位：Vue专注于视图层（View），只做一件事——把数据和DOM绑定起来。其他的路由、状态管理，都是可选的。

1.2 Vue.js的核心特性

我个人习惯把Vue的特性总结为「三板斧」。掌握了这三样，基本就能上手干活了。

1.2.1 响应式数据绑定

这是Vue最核心的能力。你想想看，传统开发中，数据变了要手动更新页面：

// 传统jQuery方式
let count = 0;
$('#btn').click(function() {
    count++;
    $('#count').text(count); // 手动更新DOM
});

在Vue里，你只需要关心数据：

// Vue方式
new Vue({
    data: {
        count: 0
    },
    methods: {
        increment() {
            this.count++; // 数据变了，页面自动更新
        }
    }
});

我在项目中遇到过最典型的场景：一个表格有几十列，每列都能排序、筛选。如果用jQuery写，光是维护状态就得写几百行。Vue的响应式系统帮我省了至少80%的代码量。

1.2.2 组件化开发

Vue把页面拆成一个个独立的组件。每个组件都有自己的HTML、CSS、JavaScript。就像搭积木一样，一个复杂的页面就是由这些小积木拼起来的。

// 一个简单的按钮组件
Vue.component('my-button', {
    template: '<button @click="handleClick">{{ text }}</button>',
    props: ['text'],
    methods: {
        handleClick() {
            alert('你点击了按钮');
        }
    }
});

这样做的好处是什么？我举个例子。有一次我们团队要改一个支付页面的样式，负责这个组件的同事只改了那个组件的代码，其他页面完全不受影响。这在传统开发中几乎不可能——改一个全局样式，经常导致其他地方「炸」了。

1.2.3 虚拟DOM

Vue在内存中维护了一个虚拟的DOM树。数据变化时，它先对比新旧虚拟DOM的差异，然后只更新真正变化的部分。说白了，就是「能少干活就少干活」。

避坑指南：我曾经犯过一个错误——在模板里写复杂的表达式。比如 {{ items.filter(i => i.active).map(i => i.name).join(', ') }}。这样每次数据变化都会重新计算，性能很差。正确的做法是用计算属性（computed）来缓存结果。

1.3 MVVM模式

MVVM是Model-View-ViewModel的缩写。听起来高大上，其实说白了就是三层架构：

层级 作用 Vue中的对应
Model（模型） 数据层，负责存储数据 data、Vuex
View（视图） UI层，负责展示 template、HTML
ViewModel（视图模型） 连接Model和View Vue实例本身

为什么需要ViewModel？你想想看，如果没有它，数据变了你要手动改视图，视图变了你要手动改数据。ViewModel就是那个「中间人」，自动帮你同步。

// MVVM在Vue中的体现
let vm = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

// 修改数据，视图自动更新
vm.message = '你好，Vue！';

我记得刚学MVVM时，总觉得这是个「玄学」。直到自己动手写了一个双向绑定的demo，才恍然大悟——原来就是给数据加了getter/setter，然后监听变化更新DOM。嗯，原理其实不复杂。

1.4 Vue.js与其他框架对比

很多新手会问：「我该学Vue还是React还是Angular？」我的建议是：先别纠结，都了解一下，选一个深入学。这里我简单对比一下：

特性 Vue React Angular
学习曲线 平缓 中等 陡峭
数据绑定 双向绑定 单向数据流 双向绑定
模板语法 HTML模板 JSX HTML模板+指令
状态管理 Vuex（官方） Redux（社区） RxJS（内置）
适用场景 中小型项目、快速开发 大型应用、灵活度高 企业级应用、全栈框架

我个人觉得，Vue最大的优势就是「上手快」。如果你是一个刚入行的前端，或者想快速做出一个能用的产品，Vue绝对是最佳选择。React的生态更丰富，但学习成本也更高。Angular嘛……说实话，我见过不少团队用Angular，但真正用得好的没几个。

注意：不要陷入「框架之争」。技术选型要看团队和项目。我见过用Vue做的大型电商平台，也见过用React做的小型博客。工具是死的，人是活的。

好了，这一章我们了解了Vue是什么、它的核心特性、MVVM模式，以及它和其他框架的区别。下一章，我会带你亲手搭建Vue开发环境，写第一个Vue应用。到时候你就知道，为什么我说Vue是「最懂前端」的框架了。

← 上一章 📖 返回目录 下一章 →