vue Render函數的使用方法

Render函數是vue2.x 新增的一個函數、主要用來提升節點的性能，它是基於JavaScript計算。使用Render函數將template裏面的節點解析成虛擬的dom。

前期在使用 iview 和 element 樹形控件時，想要在節點的前面加上光標、後面加上編輯按鈕，找遍所有的 API 都沒有找到對應設置方法，只看到了rendoerContent 函數，發現此函數可以使用想要功能，render-content 函數仔細研究了一番，發現不僅好用，並且靈活。

本例使用 vue  +  element 實現
具體文章：http://caibaojian.com/vue/guide/render-function.html

 

在我們的項目中，優化前端代碼（打包有點慢），發現編輯器報錯，然後進行如下優化

<script>
  export default {
    name: 'Item',
    functional: true,
    props: {
      icon: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      }
    },
    render(h, context) {
      const { icon, title } = context.props
      const vnodes = []

      if (icon) {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }

      if (title) {
        vnodes.push(<span slot='title'class='system-menu-title'>{(title)}</span>)
      }
      return vnodes
    }
  }
</script>

編輯器報錯如下：

 

由於這裏採用的是存HTML代碼，因此爲了改掉這部分，進行如下調整

 

 

<script>
export default {
  name: 'Item',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render: function (createElement,context) {
    const vnodes = []
    const { icon, title } = context.props
    if (icon) {
      const elHtml  = createElement('svg-icon',{
        attrs: {
          'icon-class': icon
        }
      })

      vnodes.push(elHtml)
    }

    if (title) {
      const elHtml  = createElement('span',{
        attrs: {
          slot: title,
          class:'system-menu-title'
        }
      },title)
      vnodes.push(elHtml)
    }
    return vnodes
  }
}
</script>

做了規範修改之後，功能依然正常，看起來更加規範了。