fastrx 1.4.3 新增 vue 扩展

栏目: 软件资讯 · 发布时间: 3年前

内容简介:受到vue-async-computed启发,为了方便在vue中使用fastrx。模仿vue-async-computed实现了一套自动订阅自动取消订阅的vue扩展: 首先需要注册扩展 import { rx } from "fastrx"; import RxComputed from "fast...

受到vue-async-computed启发,为了方便在vue中使用fastrx。模仿vue-async-computed实现了一套自动订阅自动取消订阅的vue扩展:

首先需要注册扩展

import { rx } from "fastrx";
import RxComputed from "fastrx/vue";
Vue.use(RxComputed);

然后就可以在vue组件中使用: 

<template>
    <div @click="onClick1" :style="{top:y+'px',left:x+'px'}">
        <span>{{test1}}</span>
        <span>{{test0}}</span>
    </div>
</template>
<script>
import {rx} from 'fastrx'
export default {
   rxComputed:{
       test0:_this=>rx.interval(1000).take(10),//简单的订阅
       test_watch:{//使用watch触发Observable发射数据
           get:ob=>ob.switchMapTo(rx.interval(1000)).map(x=>10-x)
           watch:"test1"
       },
       test1:{//使用设置方法的方式触发,可以提供给事件回调
           get:ob=>ob.switchMap(rx.timer(1000)),
           handler:"onClick1"
       },
       test2:{
           call:true,//调用test2方法而不是设置属性
           get:ob=>ob.switchMap(e=>rx.timer(1000).map(()=>e)),
           handler:"onClick1"
       },
       "x,y":{//采用解构,将结果对象中的x,y属性分别写入vue实例中的x和y属性
            get:ob=>ob.switchMap(e=>rx.timer(1000).map(()=>({x:e.screenX,y:e.screenY}))),
           handler:"onClick1",
           default:{x:0,y:0}//设置默认值
        }
   },
   methods:{
       test2(e){
           console.log(e)
       }
   }
}
</script>

以上演示了所有功能,其中get方法中传入的ob参数本质上是一个subject,相同的handler会共用一个subject。在vue组件desctroyed的时候会全部取消订阅防止内存泄漏。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Linux多线程服务端编程

Linux多线程服务端编程

陈硕 / 电子工业出版社 / 2013-1-15 / 89.00元

本书主要讲述采用现代C++ 在x86-64 Linux 上编写多线程TCP 网络服务程序的主流常规技术,重点讲解一种适应性较强的多线程服务器的编程模型,即one loop per thread。这是在Linux 下以native 语言编写用户态高性能网络程序最成熟的模式,掌握之后可顺利地开发各类常见的服务端网络应用程序。本书以muduo 网络库为例,讲解这种编程模型的使用方法及注意事项。 本......一起来看看 《Linux多线程服务端编程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码