探秘vue-rx2.0(推荐)-创新互联

前一段时间，我写了两篇文章，一篇是对目前前端主流视图框架的思考，一篇是深入使用RxJS控制复杂业务逻辑的，在这两篇中，我分别提到：

创新互联公司主营荷塘网站建设的网络公司,主营网站建设方案,手机APP定制开发,荷塘h5小程序开发搭建,荷塘网站营销推广欢迎荷塘等地区企业咨询

期望在复杂业务逻辑方面使用RxJS，更好地进行抽象，但是视图上使用轻量MVVM以达到快速开发的目的。
目前VueJS中，如果要结合RxJS，可能需要手动订阅和取消订阅，写起来还是没有CycleJS方便。

最近，VueJS社区升级了vue-rx这个库，实现了比较方便地把VueJS和RxJS结合的能力。

我们来详细了解一下。

在视图上绑定Observable

VueJS本身不是基于RxJS这一套理念构建的，如果不借助任何辅助的东西，可能我们会需要干这么一些事情：

手动订阅某些Observable，在observer里面，把数据设置到Vue的data上
在视图销毁的时候，手动取消订阅

在业务开发中，我们最常用的是绑定简单的Observable，在vue-rx中，这个需求被很轻松地满足了。

与早期版本不同，vue-rx 2.0在Vue实例上添加了一个subscriptions属性，里面放置各种待绑定的Observable，用的时候类似data。

比如，我们可以这么用它：

rx-simple.vue

<template>
 <div>
  <h5>Single Value</h5>
  <div>{{single$}}</div>

  <h5>Array</h5>
  <ul>
   <li v-for="item of arr0$">{{item}}</li>
  </ul>
  <ul>
   <li v-for="item of arr1$">{{item}}</li>
  </ul>

  <h5>Interval</h5>
  <div>{{interval$}}</div>

  <h5>High-order</h5>
  <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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

成都网站建设公司_创新互联，为您提供营销型网站建设、网站内链、云服务器、网页设计公司、移动网站建设、小程序开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容