建站
咨詢
售后
建站咨詢
新聞中心
#概覽
此更改不會(huì)影響 用戶。
成都創(chuàng)新互聯(lián)為企業(yè)級(jí)客戶提高一站式互聯(lián)網(wǎng)+設(shè)計(jì)服務(wù)，主要包括網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、成都app開發(fā)、小程序制作、宣傳片制作、LOGO設(shè)計(jì)等，幫助客戶快速提升營(yíng)銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn)，可以確保每一個(gè)作品的質(zhì)量和創(chuàng)作周期，同時(shí)每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。
以下是更改的簡(jiǎn)要總結(jié)：
h現(xiàn)在全局導(dǎo)入，而不是作為參數(shù)傳遞給渲染函數(shù)- 渲染函數(shù)參數(shù)更改為在有狀態(tài)組件和函數(shù)組件之間更加一致
- vnode 現(xiàn)在有一個(gè)扁平的 prop 結(jié)構(gòu)
更多信息，請(qǐng)繼續(xù)閱讀！
#Render 函數(shù)參數(shù)
#2.x 語法
在 2.x 中，e render 函數(shù)將自動(dòng)接收 h 函數(shù) (它是 createElement 的常規(guī)別名) 作為參數(shù)：
// Vue 2 渲染函數(shù)示例
export default {
render(h) {
return h('div')
}
}#3.x 語法
在 3.x 中，h 現(xiàn)在是全局導(dǎo)入的，而不是作為參數(shù)自動(dòng)傳遞。
// Vue 3 渲染函數(shù)示例
import { h } from 'vue'
export default {
render() {
return h('div')
}
}#渲染函數(shù)簽名更改
#2.x 語法
在 2.x 中，render 函數(shù)自動(dòng)接收諸如 h 之類的參數(shù)。
// Vue 2 渲染函數(shù)示例
export default {
render(h) {
return h('div')
}
}#3.x 語法
在 3.x 中，由于 render 函數(shù)不再接收任何參數(shù)，它將主要用于 setup() 函數(shù)內(nèi)部。這還有一個(gè)好處：可以訪問作用域中聲明的響應(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() 如何工作的詳細(xì)信息，參考組合式 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 中，整個(gè) VNode props 結(jié)構(gòu)是扁平的，使用上面的例子，下面是它現(xiàn)在的樣子
// 3.x 語法
{
class: ['button', 'is-outlined'],
style: { color: '#34495E' },
id: 'submit',
innerHTML: '',
onClick: submitForm,
key: 'submit-button'
}#遷移策略
#工具庫作者
全局導(dǎo)入 h 意味著任何包含 Vue 組件的庫都將在某處包含 import { h } from 'vue'，因此，這會(huì)帶來一些開銷，因?yàn)樗枰獛熳髡咴谄錁?gòu)建設(shè)置中正確配置 Vue 的外部化：
- Vue 不應(yīng)綁定到庫中
- 對(duì)于模塊構(gòu)建，導(dǎo)入應(yīng)該保持獨(dú)立，由最終用戶綁定器處理
- 對(duì)于 UMD/browser 版本，它應(yīng)該首先嘗試全局 Vue.h，然后回退以請(qǐng)求調(diào)用
#下一步
見 Render 函數(shù)指南更詳細(xì)的文檔！
分享名稱：創(chuàng)新互聯(lián)VUE3教程：Vue3.0渲染函數(shù)API
文章URL：http://m.5511xx.com/article/dhjhgpp.html
