React Suspense in Vue

安装

yarn add @vue-async/resource-manager
或者
npm i -S @vue-async/resource-manager

使用方法

import Vue from 'vue';
import ResourceManager from '@vue-async/resource-manager';

/*
 * mode
 * `Suspense` 组件显示模式  
 * 可选值：'hidden' | 'visible'  
 * 默认值：'visible'
 */
Vue.use(ResourceManager, { mode: 'hidden' });

// 父组件
import Child1 from 'child1'
import Child2 from 'child2'

{
  ...,
  render(){
    return <suspense>
      <Child1/>
      <Child2/>
      <div slot="fallback">loading</div>
    </suspense>
  }
}

// 或者

const Child1 = Vue.lazy(()=>import('child1'))
const Child2 = Vue.lazy(()=>import('child2'))

{
  ...,
  render(){
    return <suspense>
      <Child1/>
      <Child2/>
      <div slot="fallback">loading</div>
    </suspense>
  }
}


// 子组件
{
  ...,
  created(){
    this.$data = this.createResource((params)=>http.get('...'))
    this.$data.read({...params})
  },
  render(){
    // 参数是 Vue 响应的
    const {$result, $loading, $error} = this.$data

    return <div></div>
  }
}

Vue 上下文注入方法

this.createResource(fetchFactory, options)
创建一个 Resource 对象，返回 read()方法以及 $result, $loading, $loaded, $error 参数

fetchFactory
异步 fetch 函数

options
    prevent
    type: Boolean
    在上一次执行未完成时，阻止当前执行

    onSuccess
    type: Function
    fetchFactory 执行成功时对返回值的处理函数

    onError
    type: Function
    fetchFactory 执行异常时对错误的处理函数
Returns
    read(input)
    执行fetchFactory, input参数将会传给fetchFactory

    以下参数都已经支持 Vue 响应
    $result：fetchFactory resolved 的值
    $loading：fetchFactory 在执行中
    $loaded：fetchFactory 已经被执行过至少一次
    $error：fetchFactory 执行错误

Vue 对象上注入方法

Vue.lazy(asyncFactory, propsDef)
加载异步组件，可参考React.lazy()说明
区别于 Vue 的异步组件在于当使用在 Suspense 中时，异步组件的加载过程也会被计算

Vue.setSuspenseOptions(options)
修改 Suspense 的参数, options 同 Vue.use 时设置的参数一致

Vue 注册的组件

Suspense
处理异步组件和createResource中fetchFactory加载过程

    slot:
    fallback
    在加载过程中显示的组件，通常是显示一个 loading 组件