詳解vue3中渲染函數(shù)的非兼容變更
此更改不會(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語(yǔ)法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ù)公開(kāi) 移除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的寫(xiě)法this.$slots.header移除$listeners
$listeners對(duì)象在vue3中已經(jīng)移除,現(xiàn)在事件監(jiān)聽(tīng)器是$attrs的一部分
在vue2中,可以使用this.attrs和this.attrs和this.listeners分別訪問(wèn)傳遞給組件的attribute和時(shí)間監(jiān)聽(tīng)器,結(jié)合inheritAttrs: false,開(kāi)發(fā)者可以將這些attribute和監(jiān)聽(tīng)器應(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)聽(tīng)器現(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)聽(tīng)器,那么 $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)添加到根元素中,而是由開(kāi)發(fā)者決定在哪添加。 但是 class 和 style 不屬于 $attrs,仍然會(huì)應(yīng)用到組件的根元素:<template> <label> <input type='text' v-bind='$attrs' /> </label></template><script>export default { inheritAttrs: false}</script><!-- 寫(xiě)入 --><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)文章!
相關(guān)文章:
1. vue實(shí)現(xiàn)web在線聊天功能2. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)3. Springboot 全局日期格式化處理的實(shí)現(xiàn)4. idea配置jdk的操作方法5. Docker容器如何更新打包并上傳到阿里云6. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法7. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題8. VMware中如何安裝Ubuntu9. python 浮點(diǎn)數(shù)四舍五入需要注意的地方10. JAMon(Java Application Monitor)備忘記
