这篇文章旨在介绍一个好用的 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以及它与其他插件的不同。