开源项目精选: Vue.js 简介

这篇文章旨在介绍一个好用的 JavaScript 框架 Vue.js，让各位读者对它有一个初步的了解。

何为 Vue

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

Vue 的特点——计算属性

在 Vue 的模版中写表达式是非常便利的，但是如果在其中放入复杂的逻辑就会让模版笨重且难以维护，对于复杂的逻辑，Vue 提供了计算属性来解决。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
 
var vm = new Vue({
  el: '#example',
  data: {
        message: 'Hello'
  },
  computed: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
  }
})

这就是一个计算属性的基本例子，它会输出：

Original message: "Hello"
Computed reversed message: "olleH"

这里声明了一个计算属性 reversedMessage，而我们在 computed 中提供的函数将作为属性 vm. reversedMessage 的值。而且当 vm.message改变时，vm. reversedMessage 也会随之改变，如果有其他属性与它有关的话也会随之改变。

Vue 的方法与计算属性

实际上，这与方法很相像，我们可以用方法做出相同的效果，类似于这样

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage（） }}"</p>
</div>


var vm = new Vue({
  el: '#example',
  data: {
        message: 'Hello'
  },
  methods: {
        reversedMessage: function () {
          return this.message.split('').reverse().join('')
        }
  }
})

像这样可以得到相同的结果，不过与计算属性不同的地方在于：计算属性只要 message 没有改变，就不会执行函数，而是直接返回之前的结果；而方法需要重复执行函数。当你不需要缓存的时候，就使用方法吧。

Vue 的核心插件之 Vuex

先来解答一个问题：何为 Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex 状态管理的基本思想

把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为

另外，通过定义隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

该思想借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

什么情况下应该使用 Vuex？

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果应用够简单，最好不要使用 Vuex。一个简单的 global event bus 就足够所需了。但是，如果需要构建一个中大型单页应用，就很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

Vue 与其他插件的对比

我们以 React 为例进行对比，首先，他们都有有许多相似之处：

使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

运行时的性能

在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。

在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。

Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。

关于 web 程序

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写JavaScript 的一种工具。

Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板。对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。

规模

Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面非常有创新精神 (比如 Flux、Redux)，而这些状态管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 应用中。实际上，Vue 更进一步地采用了这种模式 (Vuex)，更加深入集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。

两者另一个重要差异是，Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。

React 与 Vue 之间还存在其他不同，在这里也就不再一一赘述了，当然，选择哪一个可能是取决与使用者自己，我们此时做的也仅仅是一点点建议，方便使用者更好的了解Vue以及它与其他插件的不同。