Name: vue-rx
Author: 羊先生

快速了解

完整资料

资料已展开

关于 vue-rx

vue-rx

将 RxJS v6 集成到 Vue.js。

RxJS 是当前 web 开发中最热门的库之一。它提供强大的功能性方法来处理事件，并将集成点集中到越来越多的框架、库和实用程序中，这一切使得学习 Rx 变得前所未有的吸引人。并且它还有能力利用你之前所掌握的语言知识，因为它几乎涵盖了所有语言。如果熟练掌握响应式编程 (reactive programming) 的话，那它所提供的一切似乎都可以变得很容易

安装

NPM + ES2015

rxjs 需要作为 peer dependency 引入。

bash 复制代码

npm install vue vue-rx rxjs --save

js 复制代码

import Vue from 'vue';
import VueRx from 'vue-rx';

Vue.use(VueRx);

webpack 打包默认会使用 dist/vue-rx.esm.js。这样引入最小数量的 Rx 操作符并且保证了最小的打包体积。

全局脚本

如果要在浏览器环境使用，需要引入 UMD 构建版本 dist/vue-rx.js。在浏览器环境中的 UMD 构建版本会假设 window.rxjs 已经存在，因此你需要确保在 Vue.js 和 RxJS 之后引入 vue-rx.js。如果 window.Vue 存在的话，vue-rx 会自动安装。

例子:

html 复制代码

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../dist/vue-rx.js"></script>

如何使用

js 复制代码

// 用 `subscriptions` 选项提供 Rx observables
new Vue({
  el: '#app',
  subscriptions: {
    msg: messageObservable
  }
});

html 复制代码

<!-- 绑定到模板 -->
<div>{{ msg }}</div>

subscriptions 选项也可以接受一个函数，这样就可以在每个组件实例中返回独一无二的 observables：

js 复制代码

import { Observable } from 'rxjs'

Vue.component('foo', {
  subscriptions: function () {
    return {
      msg: new Observable(...)
    }
  }
})

Observables 会以 vm.$observables 的形式暴露：

js 复制代码

const vm = new Vue({
  subscriptions: {
    msg: messageObservable
  }
});

vm.$observables.msg.subscribe(msg => console.log(msg));

教程

学习 RxJS-GitBook

学习 RxJS

RxJS-GitBook 提供更多

RxJS 和响应式编程的新手？除了本网站上发现的内容，这些优秀的文章和视频也将有助于你快速积累学习经验

适合的使用方向

vue-rx

由于Rxjs自带响应式，因此，Vue当中的所有和响应式相关的api，都可以被替换掉，包括：watch，data，computed以及vuex

NPM + ES2015

由于对Vue自身的响应式没有需求，同时需要跨组件传递数据，因此某些api需要被启用，包括：provide，inject

全局脚本

官方的vue-rx可以更方便的接入Rxjs，包含自动订阅的api：subscriptions

收录线索

vue-rx课程 / 教程

资料说明

内容根据公开资料整理；版本、兼容性与服务状态请以官网最新说明为准。

vue-rx

关于 vue-rx

vue-rx

NPM + ES2015

全局脚本

如何使用

教程

RxJS-GitBook 提供更多

阅读

视频

练习

工具

适合的使用方向

收录线索