一、各文档介绍
1、rxjs官网
二、环境搭建
1、使用vue-cli构建一个项目
2、安装vue-rx的依赖包
3、在src/main.js中配置使用rxjs
Vue.use(VueRx,Rx);
三、没有使用vue-rx的时候
1、关于属性的使用
2、关于事件的使用
{
this.name = '哈哈';
})
}
};
四、结合vue-rx的使用
1、项目中集成了vue-rx的时候会在vue中新增一个钩子函数subscriptions,和之前的data类似的使用
2、domStreams是一个数组用来存放事件
3、属性的使用
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.在视图中定义事件
2.在domStreams中定义
3、在subscriptions定义事件赋值给哪个变量
'hello'.toUpperCase()),
六、关于switchMap、concatMap、exhaustMap的使用
1、定义事件
获取concatMapCount$
{{concatMapCount$}}
{{switchMapCount$}}
{{exhaustMapCount$}}
2、定义事件名
3、触发事件
{
return new Observable.from(this.getCount());
}),// 当你连续点击按钮多次获取数据时，switchMap只会将最后一个点击发出的值发出，前面发出的值会被吞掉
switchMapCount$: this.getSwitchMapCount$.switchMap(e => {
return new Observable.from(this.getCount());
}),// 当你连续点击按钮多次时，exhaustMap仅执行一次，在第一次值发出后，才可以继续点击下一次发出值
exhaustMapCount$: this.getExhaustMapCount$.exhaustMap(e => {
return new Observable.from(this.getCount())
})
}
},methods: {
getCount() {
return new Promise((resolve,reject) => {
this.count ++;
setTimeout(() => {
resolve(this.count);
},1000);
})
}
}
};
七、事件中传递参数
1、html页面
点击的数字为：{{ num$.index }}
点击的数字下标为：{{ num$.num }}
2、在vue中处理
data)
// 因为视图引用了num$.index，所以这里要初始化num$为对象，避免报错
.startWith({})
}
}
}
3、输入框中获取值
value$: {{ value$ }}
{
console.log(val);
return val;
})
}
}
}
原文链接：https://www.f2er.com/vue/30016.html