RxJS实践，Vue如何集成RxJS

一、

本文章不会对RxJS的原理进行讲解，仅讨论如何在vue中对RxJS进行集成

1、30天精通 RxJS

这是一个台湾开发者编写的关于RxJS的教程，教程涉及到原理解析、简易实现，以及常用operator的介绍。

2、学习RxJS operator

各种常用操作符的作用与例子，可以结合RxJS的官方文档进行查阅。

二、Vue简单集成RxJS

想要在Vue中使用RxJS，只需要如下引用即可，当然，更多引用方法可以参考官方文档，比如按需引入

import Rx from 'rxjs/Rx'
如果你想在vue中使用RxJS的体验更好，这里推荐使用vue-rx这个官方维护的库，使用如下：
import Vue from 'vue'
import VueRx from 'vue-rx'
import Rx from 'rxjs/Rx'

Vue.use(VueRx, Rx)
复制代码

这样，在Vue实例当中就会多了subscriptions这个钩子函数，他的用法类似data，使用如下所示：

<template>
    <div>
        <span>姓名：{
   { name$ }}</span>
        <span>年龄：{
   { age$ }}</span>
        <button v-stream:click="setName$">点击设置name的值</button>
    </div>
</template>

<script>
export default {
    domStreams: [
        'setName$'
    ],
    subscriptions () {
        return {
            age$: Rx.Observable.of(23)
                .map(data => data),
            name$: this.setName$
                .map(e =>