Vue 节点渲染回调

在使用Vue进行开发时，不可避免的我们会使用到$refs获取实例，或者获取节点。

  • 众所周知，Vue没有提供渲染完成的生命周期，而且就算提供了渲染完成的生命周期，由于条件渲染、异步操作等等也无法判定某一个节点是否渲染完成。
  • 为了解决这个问题，灵机一动，想到使用指令来“观察”节点是否渲染，代码如下：
/**
 * 节点渲染完成回调，默认回调事件为 after-render
 */
const install = (Vue) => {
  Vue.directive('after-render', {
    bind(el, binding, node) {
      onRender(el, binding, node)
    },
    update(el, binding, node) {
      if (!binding.modifiers.once) {
        onRender(el, binding, node)
      }
    }
  })
}

const onRender = (el, binding, node) => {
  if (node.componentInstance) {
    node.componentInstance.$nextTick(() => {
      // 组件节点上使用指令回调事件为：@after-render="onAfterRender"
      node.componentInstance.$emit(binding.arg || 'after-render', el)
    })
  } else {
    node.context.$nextTick(() => {
      // 元素节点上使用指令回调事件为：this.$on('after-render', (e) => {})
      node.context.$emit(binding.arg || 'after-render', el)
    })
  }
}

export default install
  • 食用方法：

main.js

import Vue from 'vue'
import afterRender from '@/directive/after-render/after-render'
Vue.use(afterRender)

demo.vue

<template>
  <div>
    <div name="div-demo" v-after-render:onDivRender></div>

    <el-tree name="tree-demo" v-after-render @after-render="onTreeRender" />
  </div>
</template>

<script>
export default {
  name: "demo",
  created() {
    this.$on('onDivRender', (e) => {
      console.log('onDivRender', e)
    })
  },
  methods: {
    onTreeRender(e) {
      console.log('onTreeRender', e)
    }
  }
}
</script>

<style scoped>

</style>
  • 效果：
    image.png