渲染函數(shù)API變更

此更改不會(huì)影響到<template>用戶

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

// 2.0 渲染函數(shù)export default { render(h) { return h(’div’) }}// 3.x語法export default { render() { return h(’div’) }}渲染函數(shù)簽名更改

// 2.xexport default { render(h) { return h(’div’) }}// 3.ximport { h, reactive } from ’vue’export default { setup(prop, {slots, attrs, emit}) { const state = reactive({ count: 0 }) function increment() { state.count++ } // 返回render函數(shù) return () => h( ’div’, { onClick: increment }, state.count ) }}VNode Props 格式化

// 2.x{ class: [’button’, ’is-outlined’], style: {color: ’#fffff’}, attr: {id: ’submit’}, domProps: {innerHTML: ’’}, on: {click: submitForm}, key: ’submit-button’}// 3.x VNode的結(jié)構(gòu)是扁平的{ class: [’button’, ’is-outlined’], style: { color: ’#34495E’ }, id: ’submit’, innerHTML: ’’, onClick: submitForm, key: ’submit-button’}slot統(tǒng)一

更改了普通slot和作用域slot

this.$slots現(xiàn)在將slots作為函數(shù)公開 移除this.$scopedSlots

// 2.xh(LayoutComponent, [ h(’div’, {slot: ’header’}, this.header), h(’div’, {slot: ’header’}, this.header)])// 作用域slot：// 3.xh(LayoutComponent, {}, { header: () => h(’div’, this.header), content: () => h(’div’, this.content)})// 需要以編程方式引入作用域slot時(shí)，他們現(xiàn)在被統(tǒng)一在了$slots選項(xiàng)中// 2.x的作用域slotthis.$scopedSlots.header// 3.x的寫法this.$slots.header移除$listeners

$listeners對(duì)象在vue3中已經(jīng)移除，現(xiàn)在事件監(jiān)聽器是$attrs的一部分

在vue2中，可以使用this.attrs和this.attrs和this.listeners分別訪問傳遞給組件的attribute和時(shí)間監(jiān)聽器，結(jié)合inheritAttrs: false，開發(fā)者可以將這些attribute和監(jiān)聽器應(yīng)用到其他元素，而不是根元素

<template><label> <input type='text' v-bind='$attrs' v-on='$listeners'></label></template><script> export default { inheritAttrs: false }</script>

在vue的虛擬DOM中，事件監(jiān)聽器現(xiàn)在只是以on為前綴的attribute，這樣就成了attrs對(duì)象的一部分，這樣attrs對(duì)象的一部分，這樣listeners就被移除了

<template> <label> <input type='text' v-bind='$attrs' /> </label></template><script>export default { inheritAttrs: false}// 如果這個(gè)組件接收一個(gè) id attribute 和一個(gè) v-on:close 監(jiān)聽器，那么 $attrs 對(duì)象現(xiàn)在將如下所示{ id: ’my-input’, onClose: () => console.log(’close Event Triggered’)}</script>$attrs現(xiàn)在包括class和style

現(xiàn)在的$attr包含所有的attribute，包括class和style

在2.x中，虛擬dom會(huì)對(duì)class和style進(jìn)行特殊處理，所以他們不包括在$attr中在使用inheritAttr: false的時(shí)候會(huì)產(chǎn)生副作用

$attrs 中的 attribute 不再自動(dòng)添加到根元素中，而是由開發(fā)者決定在哪添加。 但是 class 和 style 不屬于 $attrs，仍然會(huì)應(yīng)用到組件的根元素：

<template> <label> <input type='text' v-bind='$attrs' /> </label></template><script>export default { inheritAttrs: false}</script><!-- 寫入 --><my-component class='my-class'></my-component><!-- vue2 將生成 --><label class='my-class'> <input type='text' /></label><!-- vue3 將生成 --><label> <input type='text' /></label>

以上就是詳解vue3中渲染函數(shù)的非兼容變更的詳細(xì)內(nèi)容，更多關(guān)于vue 渲染函數(shù)非兼容變更的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！