<template> <div> <h4>Watch</h4> <div> <button v-on:click="num++">add</button> source: {{num}} -> result: {{num$}} </div> </div> </template> <script> import 'rxjs/add/operator/pluck' import 'rxjs/add/operator/startWith' import 'rxjs/add/operator/delay' export default { name: 'rx-watch', data() { return { num: 1 } }, subscriptions() { return { num$: this.$watchAsObservable('num') .pluck('newValue') .startWith(this.num) .map(a => a + 1) .delay(3000) } } } </script>
这个例子里面的num$经过这么几步：
this.$watchAsObservable('num')，把num属性的变动，映射到一个数据流上
这个数据流的结果是一个对象，里面有newValue和oldValue属性，我们通常情况下，要的都是newValue，所以用pluck把它挑出来
注意，这个检测的只是后续变动，对于已经存在的值，是$watch不到的，所以，用startWith，把当前值放进去
然后是常规的rx运算了
那么，这件事的原理是什么呢？
我们知道，Vue实例中，data上的属性都会存在ReactiveSetter，所以它被赋值的时候，就会触发这个setter，所以，$watchAsObservable的内部只需根据数据变动，生成一个Observable就可以了。
$watchAsObservable的方法签名如下：
$watchAsObservable(expOrFn, [options])
这个options，跟vue的$watch方法的options一样。
有时候，我们会有这样的情况：在组件实例化的时候，数据流由于缺少某些条件，可能还没法创建。
比如说，某个组件，依赖于路由上面的某个参数，这时候，可能你不知道怎么去初始化绑定。
其实，产生这样的想法，本身就错了，因为没有用Rx的理念去思考问题。想一下下面这句话：
数据流的定义，与初始条件是否具备无关。
初始条件其实也只是整个数据流管道中的一节，如果初始不确定的话，我们只要给它留一个数据入口就好了，后续的流转定义可以全部写得出来。
const taskId$ = new Subject() const task$ = taskId$ .distinctUntilChanged() .switchMap(id => this.getInitialData(id))
然后，在路由变更等事件里，往这个taskId$里面next当前的id就可以了。通过这种方式，我们就可以把task$直接绑定到界面上。
或者，taskId$也可以通过在路由上面的watch转化而成，只是不能直接用$watchAsObservable，可以考虑改进一下这种情况。
这样可以实现组件canReuse的情况下，改动路由参数，触发当前页面的数据刷新，实现视图的更轻量级的刷新。
将DOM事件转化为Observable
使用RxJS可以直接把DOM事件转化为Observable，vue-rx也提供了一个类似的方法来做这个事，不过我没理解这两个东西有什么差异？具体参见官方示例吧。
构建优化
关注vue-rx的readme，可以发现，目前推荐使用绑定的方式是这样：
import Vue from 'vue' import Rx from 'rxjs/Rx' import VueRx from 'vue-rx' // tada! Vue.use(VueRx, Rx)
但这样会有一个问题，import的是rxjs/Rx，我们看到，这个文件里把所有可以被挂接到Rx对象上的东西都import进来了，这会导致构建的时候没法tree-shaking，用不到的那些操作符也被构建进来了，一个简单的demo，可能构建结果也有200多k，这还是太大了。
我们查看一下vue-rx的源码，发现传入的这个Rx是怎么使用的呢？
var obs$ = Rx.Observable.create(function (observer) { ... // Returns function which disconnects the $watch expression var disposable if (Rx.Subscription) { // Rx5 disposable = new Rx.Subscription(unwatch) } else { // Rx4 disposable = Rx.Disposable.create(unwatch) }
这里，其实只是要使用Observable和Subscription这两个东西，所以我们可以改成这样：
import Vue from 'vue' import { Observable } from 'rxjs/Observable' import { Subscription } from 'rxjs/Subscription' import VueRx from 'vue-rx' // tada! Vue.use(VueRx, { Observable, Subscription })
再试试，构建大小只有不到100k了，而且是可以正常运行的。如果用的是Rx 4，需要传入的就是Disposable而不是Subscription。
另外，如果我们使用了$watchAsObservable，还会需要引入另外一个东西：
import 'rxjs/add/operator/publish'
这是因为在$watchAsObservable里面，为了共享Observable，把它pubish之后refCount了，所以要引入，用不到这个方法的话，可以不引。
如果使用了$fromDOMEvent，还需要引入这个：
import 'rxjs/add/observable/empty'
因为$fromDOMEvent里面的这段：
if (typeof window === 'undefined') { return Rx.Observable.empty() }
小结
有了这个库之后，我们就可以比较优雅地结合VueJS和RxJS了。之前，两者之间结合的麻烦点主要在于：
在RxJS体系中，数据的进、出这两头是有些繁琐的。