前一段時間，我寫了兩篇文章，一篇是對目前前端主流視圖框架的思考，一篇是深入使用RxJS控制復(fù)雜業(yè)務(wù)邏輯的，在這兩篇中，我分別提到：

最近，VueJS社區(qū)升級了vue-rx這個庫，實現(xiàn)了比較方便地把VueJS和RxJS結(jié)合的能力。

我們來詳細了解一下。

在視圖上綁定Observable

VueJS本身不是基于RxJS這一套理念構(gòu)建的，如果不借助任何輔助的東西，可能我們會需要干這么一些事情：

在業(yè)務(wù)開發(fā)中，我們最常用的是綁定簡單的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數(shù)據(jù)形態(tài)。其中，single$和interval$雖然創(chuàng)建方式不同，但實際上用的時候是一樣的，因為，對它們的訂閱，都是取其最后一個值，這兩者的區(qū)別只是，一個不變了，一個持續(xù)變，但界面展示的始終是最后那個值。

關(guān)于數(shù)組，初學(xué)者需要稍微注意一下，從同樣的數(shù)組，分別通過Observable.of和Observable.from出來的形態(tài)是大為不同的：