探秘vue-rx 2.0(推荐)

前一段时间，我写了两篇文章，一篇是对目前前端主流视图框架的思考，一篇是深入使用RxJS控制复杂业务逻辑的，在这两篇中，我分别提到：

最近，VueJS社区升级了vue-rx这个库，实现了比较方便地把VueJS和RxJS结合的能力。

我们来详细了解一下。

在视图上绑定Observable

VueJS本身不是基于RxJS这一套理念构建的，如果不借助任何辅助的东西，可能我们会需要干这么一些事情：

在业务开发中，我们最常用的是绑定简单的Observable，在vue-rx中，这个需求被很轻松地满足了。

与早期版本不同，vue-rx 2.0在Vue实例上添加了一个subscriptions属性，里面放置各种待绑定的Observable，用的时候类似data。

比如，我们可以这么用它：

rx-simple.vue

<template> <div>  <h4>Single Value</h4>  <div>{{single$}}</div>  <h4>Array</h4>  <ul>   <li v-for="item of arr0$">{{item}}</li>  </ul>  <ul>   <li v-for="item of arr1$">{{item}}</li>  </ul>  <h4>Interval</h4>  <div>{{interval$}}</div>  <h4>High-order</h4>  <div>{{high$}}</div> </div></template><script>import { Observable } from 'rxjs/Observable'import 'rxjs/add/observable/of'import 'rxjs/add/observable/from'import 'rxjs/add/operator/toArray'import 'rxjs/add/observable/interval'import 'rxjs/add/observable/range'import 'rxjs/add/operator/map'import 'rxjs/add/operator/mergeAll'const single$ = Observable.of(Math.PI)const arr0$ = Observable.of([1, 1, 2, 3, 5, 8, 13])const arr1$ = Observable.from([1, 1, 2, 3, 5, 8, 13]).toArray()const interval$ = Observable.interval(1000)const high$ = Observable.range(1, 5) .map(item => Observable.interval(item * 1000)) .mergeAll()export default { name: 'rx-simple', subscriptions: {  single$,  arr0$,  arr1$,  interval$,  high$ }}</script>

这个demo里面，演示了四种不同的Rx数据形态。其中，single$和interval$虽然创建方式不同，但实际上用的时候是一样的，因为，对它们的订阅，都是取其最后一个值，这两者的区别只是，一个不变了，一个持续变，但界面展示的始终是最后那个值。

关于数组，初学者需要稍微注意一下，从同样的数组，分别通过Observable.of和Observable.from出来的形态是大为不同的：