Vue 3.0 渲染函數(shù)API

#概覽

此更改不會影響 <template> 用戶。

以下是更改的簡要總結(jié)：

• h 現(xiàn)在全局導入，而不是作為參數(shù)傳遞給渲染函數(shù)
• 渲染函數(shù)參數(shù)更改為在有狀態(tài)組件和函數(shù)組件之間更加一致
• vnode 現(xiàn)在有一個扁平的 prop 結(jié)構(gòu)

更多信息，請繼續(xù)閱讀！

#Render 函數(shù)參數(shù)

#2.x 語法

在 2.x 中，e render 函數(shù)將自動接收 h 函數(shù) (它是 createElement 的常規(guī)別名) 作為參數(shù)：

// Vue 2 渲染函數(shù)示例
export default {
  render(h) {
    return h('div')
  }
}

#3.x 語法

在 3.x 中，h 現(xiàn)在是全局導入的，而不是作為參數(shù)自動傳遞。

// Vue 3 渲染函數(shù)示例
import { h } from 'vue'


export default {
  render() {
    return h('div')
  }
}

#渲染函數(shù)簽名更改

#2.x 語法

在 2.x 中，render 函數(shù)自動接收諸如 h 之類的參數(shù)。

// Vue 2 渲染函數(shù)示例
export default {
  render(h) {
    return h('div')
  }
}

#3.x 語法

在 3.x 中，由于 render 函數(shù)不再接收任何參數(shù)，它將主要用于 setup() 函數(shù)內(nèi)部。這還有一個好處：可以訪問作用域中聲明的響應(yīng)式狀態(tài)和函數(shù)，以及傳遞給 setup() 的參數(shù)。

import { h, reactive } from 'vue'


export default {
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      count: 0
    })


    function increment() {
      state.count++
    }


    // 返回render函數(shù)
    return () =>
      h(
        'div',
        {
          onClick: increment
        },
        state.count
      )
  }
}

有關(guān) setup() 如何工作的詳細信息，參考組合式 API 指南。

#VNode Props 格式化

#2.x 語法

在 2.x 中，domProps 包含 VNode props 中的嵌套列表：

// 2.x
{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  attrs: { id: 'submit' },
  domProps: { innerHTML: '' },
  on: { click: submitForm },
  key: 'submit-button'
}

#3.x 語法

在 3.x 中，整個 VNode props 結(jié)構(gòu)是扁平的，使用上面的例子，下面是它現(xiàn)在的樣子

// 3.x 語法
{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  id: 'submit',
  innerHTML: '',
  onClick: submitForm,
  key: 'submit-button'
}

#遷移策略

#工具庫作者

全局導入 h 意味著任何包含 Vue 組件的庫都將在某處包含 import { h } from 'vue'，因此，這會帶來一些開銷，因為它需要庫作者在其構(gòu)建設(shè)置中正確配置 Vue 的外部化：

• Vue 不應(yīng)綁定到庫中
• 對于模塊構(gòu)建，導入應(yīng)該保持獨立，由最終用戶綁定器處理
• 對于 UMD/browser 版本，它應(yīng)該首先嘗試全局 Vue.h，然后回退以請求調(diào)用

#下一步

見 Render 函數(shù)指南更詳細的文檔！