一、各文檔介紹

1、rxjs官網

2、vue-rxjs地址

二、環境搭建

1、使用vue-cli構建一個項目

2、安裝vue-rx的依賴包

yarn add rxjsyarn add rxjs-compatyarn add vue-rx

3、在src/main.js中配置使用rxjs

// 使用vueRximport VueRx from 'vue-rx';import Rx from 'rxjs/Rx'Vue.use(VueRx, Rx);

三、沒有使用vue-rx的時候

1、關于屬性的使用

import { Observable } from 'rxjs';export default { data() {  return {   name: new Observable.of('張三')  } }};

2、關于事件的使用

import { Observable } from 'rxjs';export default { data() {  return {   name: new Observable.of('張三'),  } }, mounted () {  new Observable.fromEvent(this.$refs.btn, 'click').subscribe(e => {   this.name = '哈哈';  }) }};

四、結合vue-rx的使用

1、項目中集成了vue-rx的時候會在vue中新增一個鉤子函數subscriptions,和之前的data類似的使用

2、domStreams是一個數組用來存放事件

3、屬性的使用

export default { name: 'HelloWorld', data () {  return {   msg: 'Welcome to Your Vue.js App'  } }, domStreams: ['setName$', 'resetMsg$'], subscriptions() {  return {   // 發送一個普通的值   name: new Observable.of('張三'),   // 發送一個修改的值   age$ : Observable.of(20).map(item => item + 10),   // 定義發送一個數組   arr$: new Observable.of(['第一本書', '第二本書']),   // 發送一個數組   obj$: new Observable.of({     a: 'test-obj',    name: '呵呵'    }),   // 發送一個promise函數   promise$: new Observable.fromPromise(this.getPromise()),   // 定時器   interval$: new Observable.interval(1000)  } }, methods: {  getPromise() {   return new Promise((resolve, reject) => {    setTimeout(() => {     resolve('promise');    }, 1000)   })  } },}

5、事件的使用

1.在視圖中定義事件

<button v-stream:click="setName$">點擊按鈕設置值</button>

2.在domStreams中定義

domStreams: ['setName$'],

3、在subscriptions定義事件賦值給哪個變量

name$: this.setName$.map(e => 'hello'.toUpperCase()),

六、關于switchMap、concatMap、exhaustMap的使用

1、定義事件

<button class="btn" v-stream:click="getConcatMapCount$">點擊獲取concatMapCount$</button><p>{{concatMapCount$}}</p><button class="btn" v-stream:click="getSwitchMapCount$">點擊獲取switchMapCount$</button><p>{{switchMapCount$}}</p><button class="btn" v-stream:click="getExhaustMapCount$">點擊獲取exhaustMapCount$</button><p>{{exhaustMapCount$}}</p>