Vue.js – 渐进式 JavaScript 框架

Vue纪录片：

Vue介绍：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。^[5]与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。^[1]

为什么使用Vue？

我们都知道完整的网页是由 DOM 组合与嵌套形成最基本的视图结构，再加上 CSS 样式的修饰，使用 JavaScript 接受用户的交互请求，并通过事件机制来响应用户交互操作而形成的。

我们把最基本的视图结构（也就是 HTML DOM）拿出来，称为视图层。这个被称为视图层的部分就是 Vue 核心库关注的部分。

Vue.js 为什么关注视图层呢？因为一些页面元素非常多。结构庞大的网页如果使用传统开发方式，数据和视图会全部混合在 HTML 中，处理起来十分不易，并且结构之间还存在依赖或依存关系，代码上就会出现更多问题。

有过前端开发基础的读者都应当了解过 jQuery，jQuery 给予我们简洁的语法和跨平台的兼容性，极大地简化了 JavaScript 开发人员遍历 HTML 文档、操作 DOM、事件处理等操作。

用过 jQuery 的读者都有体会，开始页面元素不多，有时会需要一层层地不断向上寻找父辈元素，如$('#xxx').parent().parent()，但后期修改页面结构，代码可能就会变得臃肿，如$('#xxx').parent().parent().parent()，随着产品升级的速度越来越快，修改变得越来越多，页面中相似的关联和嵌套 DOM 元素多得数不清，而 jQuery 选择器及 DOM 操作本身也存在性能缺失问题，想要修改无从下手。

总之，原本轻巧简洁的 jQuery 代码，在产品需求面前变得啰嗦冗长。

但是 Vue.js 解决了这些问题，这些问题将在 Vue 中消失。

Vue主要特点：

Vue.js 是一个优秀的前端界面开发 JavaScript 库，它之所以非常火，是因为有众多突出的特点，其中主要的特点有以下几个。

1) 轻量级的框架

Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。

2) 双向数据绑定

声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令

Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。

在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。

组件还支持热重载（hotreload）。当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。CSS 也支持热重载。

5) 客户端路由

Vue-router 是 Vue.js 官方的路由插件，与 Vue.js 深度集成，用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理

状态管理实际就是一个单向的数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，使 State 产生变化，从而使 View 重新渲染，形成一个单独的组件。