建站
咨詢
售后
建站咨詢
新聞中心
#概覽
此更改不會影響 用戶。
成都創(chuàng)新互聯(lián)為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設計服務，主要包括網(wǎng)站設計、網(wǎng)站制作、成都app開發(fā)、小程序制作、宣傳片制作、LOGO設計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗豐富的經(jīng)驗，可以確保每一個作品的質量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。
以下是更改的簡要總結：
h現(xiàn)在全局導入，而不是作為參數(shù)傳遞給渲染函數(shù)- 渲染函數(shù)參數(shù)更改為在有狀態(tài)組件和函數(shù)組件之間更加一致
- vnode 現(xiàn)在有一個扁平的 prop 結構
更多信息，請繼續(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)部。這還有一個好處：可以訪問作用域中聲明的響應式狀態(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
)
}
} 有關 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 結構是扁平的，使用上面的例子，下面是它現(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'，因此，這會帶來一些開銷，因為它需要庫作者在其構建設置中正確配置 Vue 的外部化：
- Vue 不應綁定到庫中
- 對于模塊構建，導入應該保持獨立，由最終用戶綁定器處理
- 對于 UMD/browser 版本，它應該首先嘗試全局 Vue.h，然后回退以請求調(diào)用
#下一步
見 Render 函數(shù)指南更詳細的文檔！
當前文章：創(chuàng)新互聯(lián)VUE3教程：Vue3.0渲染函數(shù)API
轉載來于：http://m.fisionsoft.com.cn/article/dhjhgpp.html
