vue-sync-promise-demo

原理

自定义指令，异步函数作为参数传入，指令中await异步函数将数据innerText到dom节点

使用方法

• 将 sync.js插件放入项目
• 在main.js中引入自定义指令

import sync from './directive/sync/sync'

Vue.use(sync)

• 使用指令

<span v-sync="asyncFunc(value)"/>

<span v-sync.update="promiseFunc(value)"/>

<span v-sync="asyncFunc(value)" ：key="`${value}`"/>

示例

• github：nitmali/vue-sync-promise-demo

指令

• sync.js

/**
 * 使用方法 v-sync.update:arg='value'
 * update - 所在组件的 VNode 更新时同步更新
 * arg - 插入的DOM属性，未传入时以innerText方式插入
 * value - Promise方法 | 普通方法 | 值
 */
const install = (Vue) => {
  Vue.directive('sync', {
    async bind(el, binding, node) {
      await doWork(el, binding, node)
    },
    async update(el, binding, node) {
      if (binding.modifiers.update) {
        await doWork(el, binding, node)
      }
    }
  })
}

const doWork = async(el, binding, node) => {
  const attribute = binding.arg
  const value = binding.value
  let _value = ''
  // 判断Promise类型
  if (value instanceof Promise) {
    _value = await value
  } else {
    _value = value
  }
  if (!attribute) {
    el.innerText = _value
  } else {
    const list = attribute.split('-')
    if (list.length === 2) {
      el = el.querySelector(list[0])
      el.setAttribute(list[1], _value)
    } else {
      el.setAttribute(attribute, _value)
    }
  }
}

export default install