说说你对vue的理解?

Vue.js（/vjuː/）是用来创建用户界面的开源 JavaScript 框架，也常被拿来做单页应用。它关注 MVC 里的视图层，又能方便地拿到数据更新，通过组件方法完成视图与模型交互。面试里「说说你对 Vue 的理解」，通常要从 Web 历史、核心特性和和 React / jQuery 的差别讲起。

每一种前端技术都是特定场景的解法。静态页、CGI、JSP、Ajax、jQuery、SPA 框架一路走来，Vue 要解决的是：用数据驱动和组件化，把 DOM 操作从业务里抽走。

一、从历史说起

Web 是 World Wide Web 的简称，中文译为万维网。可以按四个时代来理解：

• 石器时代
• 文明时代
• 工业革命时代
• 百花齐放时代

石器时代

静态网页，可以欣赏一下 1997 的 Apple 官网。

最早的网页没有数据库，像一张能在网上看的报纸，直到 CGI。通过 CGI Perl 跑一小段代码和数据库或文件系统交互，例如当时的 Google（1998 年）。

文明时代

ASP、JSP 大家不陌生，大约 2005 年前后出现，先后有微软 ASP 和 Java Server Pages，取代 CGI，增强 Web 与服务端交互的安全性。本质是 Java + HTML：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JSP demo</title>
</head>
<body>
  <img src="http://localhost:8080/web05_session/1.jpg" width=200 height=100 />
</body>
</html>

JSP 不够灵活：在服务器执行，返回给客户端的通常是整页 HTML。每次请求的数据和内容都是服务端渲染好的 DOM，开发灵活度差。同年 Ajax 火了（技术雏形在 1999，2005 才普及）。

工业革命时代

移动设备普及，jQuery 出现，SPA 雏形和 Backbone、EmberJS、AngularJS 一批框架跟上。当时 SEO、过多页面、复杂 View 绑定都不好处理。这几年的框架节约了大量精力、降低门槛、加快迭代，可以称为工业时代。

百花齐放时代

这里没有文字，放一张图感受一下。

Web 变化又大又快。那今天的主角 Vue 又是为了解决什么？接着看。

二、Vue 是什么

Vue.js 用于创建用户界面，也是创建单页应用的 Web 框架。2016 年一项 JS 调查里开发者满意度 89%。在 GitHub 上平均每天约 95 星，一度是星标数第 3 的项目。

它关注 MVC 的视图层，也能方便获取数据更新，通过组件内部方法实现视图与模型交互。作者尤雨溪在为 AngularJS 工作后抽出自己喜欢的部分，做成相当轻量的框架。最早发布于 2014 年 2 月。

三、Vue 核心特性

数据驱动（MVVM）

MVVM 表示 Model-View-ViewModel：

• Model：模型层，业务逻辑以及和服务器交互
• View：视图层，把数据变成 UI，可简单理解成 HTML 页面
• ViewModel：连接 Model 和 View 的桥梁

关系图如下：

组件化

一句话：把图形、非图形的各种逻辑抽象成统一的「组件」。在 Vue 里每个 .vue 文件都可以视为一个组件。优势：

• 降低耦合：接口不变就可以换实现，例如输入框换成日历、时间、范围
• 调试方便：出问题可按组件排除；职责单一，比分析整站简单
• 可维护：组件被复用，优化一处等于整体升级

指令系统

指令（Directives）是带 v- 前缀的特殊属性。表达式变了，连带影响会响应式作用到 DOM。常用：

• 条件渲染 v-if
• 列表渲染 v-for
• 属性绑定 v-bind
• 事件绑定 v-on
• 双向数据绑定 v-model

没有指令之前，往往是先拿到 DOM 再干点什么。

四、Vue 跟传统开发的区别

没有落地场景的革命不是好革命。以注册账号这种高频需求为例：

用 jquery 的思路：选中流程 DOM，点按钮隐藏当前、显示下一步。

用 vue 基本不操作 DOM。双向绑定之后，改变量就能控制节点属性。视图用变量控制显示，点按钮只改这个变量：

• Vue 所有界面事件都只操作数据；jQuery 操作 DOM
• Vue 所有界面变动都根据数据自动绑定；jQuery 操作 DOM

五、Vue 和 React 对比

没有绝对好坏，只是场景不同。

相同点

• 都有组件化思想
• 都支持服务器端渲染
• 都有 Virtual DOM
• 数据驱动视图
• 都有 native 方案：Vue 的 weex、React 的 React native
• 都有构建工具：vue-cli、Create React App

区别

• 数据流向：react 推崇单向数据流，Vue 是双向数据流
• 数据变化：React 不可变数据，Vue 可变数据
• 组件通信：React 多用回调；Vue 子到父可以用事件和回调
• diff：React 用 diff 队列得到 patch 再批量更新；Vue 用双向指针，边对比边更新 DOM

六、参考文献

• https://segmentfault.com/a/1190000016269636
• https://zh.wikipedia.org/zh-cn/Vue.js
• https://zhuanlan.zhihu.com/p/20197803
• https://zhuanlan.zhihu.com/p/38296857

一句话总结：Vue 用 MVVM 把「改数据」变成「改界面」：组件化拆 UI，指令声明式操作 DOM，和 jQuery 盯节点、React 单向不可变形成对照。