dom渲染完毕再渲染数据_在vue组件中 异步手动渲染dom

在业务中，页面会动态的渲染组件，组件中会根据数据，去特殊处理渲染dom元素，当遇到需要异步的去渲染时，会出现异步的问题无法正常显示。如下，重新生成一个组件进行渲染。

使用基础 Vue 构造器，创建一个“子类”。

参考：

API — Vue.js​

const Component = Vue.extend({

template: html

})

const instance = new Component()

instance.$mount()

if (this.$refs['mySvg' + index][0]) {

this.$refs['mySvg' + index][0].innerHTML = ''

this.$refs['mySvg' + index][0].appendChild(instance.$el)

this.$once('hook:beforeDestroy', function() {

instance.$destroy()

})

}

注意：每次生成一个组建后，都需要去销毁它，否则该组件会一直存在于内存中！！