詳解vue3中渲染函數(shù)的非兼容變更

更新時(shí)間：2021年03月10日 10:15:44 作者：月島蘑菇

這篇文章主要介紹了詳解vue3中渲染函數(shù)的非兼容變更，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

渲染函數(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語(yǔ)法
export default {
 render() {
  return h('div')
 }
}

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

// 2.x
export default {
 render(h) {
  return h('div')
 }
}

// 3.x
import { 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.x
h(LayoutComponent, [
 h('div', {slot: 'header'}, this.header),
 h('div', {slot: 'header'}, this.header)
])
// 作用域slot：


// 3.x
h(LayoutComponent, {}, {
 header: () => h('div', this.header),
 content: () => h('div', this.content)
})
// 需要以編程方式引入作用域slot時(shí)，他們現(xiàn)在被統(tǒng)一在了$slots選項(xiàng)中
// 2.x的作用域slot
this.$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 id="my-id" class="my-class"></my-component>
<!-- vue2 將生成 -->
<label class="my-class">
 <input type="text" id="my-id" />
</label>
<!-- vue3 將生成 -->
<label>
 <input type="text" id="my-id" class="my-class" />
</label>

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

您可能感興趣的文章: