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

第一個(gè)參數(shù)是必須的?！靖瓉淼氖且粯拥摹]有發(fā)生變化】
類型:{String | Object | Function} 
一個(gè) HTML 標(biāo)簽名、一個(gè)組件、一個(gè)異步組件、或一個(gè)函數(shù)式組件。
是要渲染的html標(biāo)簽。
第一個(gè)參數(shù)div  是表示創(chuàng)建一個(gè)div的元素 

第二個(gè)參數(shù)是可選的。 
【第二個(gè)參數(shù)的格式發(fā)生了變化， 現(xiàn)在是一個(gè)扁平的 prop 結(jié)構(gòu)】
類型:{Object} 主要是當(dāng)前html中的各種屬性。
在開發(fā)時(shí)。建議傳，實(shí)在沒有傳的時(shí)候，傳入 null

第三個(gè)參數(shù)可選的。(第三個(gè)參數(shù)建議使用函數(shù)返回，否者會有警告)
類型：{String | Array | Object} children
虛擬子節(jié)點(diǎn)(vnodes),當(dāng)前html標(biāo)簽的元素。

ps:第三個(gè)參數(shù)建議使用函數(shù)返回。否者在控制有警告
Non-function value encountered for default slot. Prefer function slots for better performance. 

{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  attrs: { id: 'submit' },
  domProps: { innerHTML: '' },
  on: { click: submitForm },
  key: 'submit-button'
}

{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  //屬性不需要放在 attrs domProps on這些字段下了。
  id: 'submit',
  innerHTML: '',
  onClick: submitForm,
  key: 'submit-button'
}

render(h){
    return h('div',{
      //第二個(gè)參數(shù)
      class:{
        'is-red': true
      }
    },
    //第三個(gè)參數(shù)  
    [h('p','這是一個(gè)render')]
);

//renderTest.vue
<script lang="ts">
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(
        'button',
        {
          onClick: increment //這里綁定事件
        },
        state.count
      )
  }
}
</script>

<script lang="ts">
import { h, reactive } from 'vue'
export default {
    setup() {
      const state = reactive({
        listArr: [
          { name: '三悅有了新工作', like: '工作答辯-你為什來這個(gè)-為了錢',id:'00' },
          { name: '三悅有了新工作', like: '沒有最好的選擇，那不太壞的選擇也可以吧', id: '01' },
          { name: '三悅有了新工作', like: '沒有最好的選擇，那不太壞的選擇也可以吧', id: '02' },
          { name: '三悅有了新工作', like: '沒有那么好，就是比什么都不做多做了一點(diǎn)點(diǎn)而已',id: '03' },
          { name: '三悅有了新工作', like: '能好好說話是因?yàn)閻?，不能好好說話，是因?yàn)樘煜ち司屯诉吔?, id: '04' }
        ]
      })
      // 返回render函數(shù)
      return () =>
        h(
          'ul',
          null,
          [
            state.listArr.map(item => { //通過map進(jìn)行循環(huán)
              return h('li', { key: item.id }, ['劇名：',item.name,'我喜歡的句子：', item.like])
            })
          ]
        )
    }
}
</script>

//renderTest.vue 文件
<script lang="ts">
import { h } from 'vue'
export default {
  setup(props, { slots }) {
    return () =>
      h(
        'div',
        null,
        [  
          h('h1', null, '我組件的默認(rèn)內(nèi)容'), 
          h('h2', null, [slots.default?.()]), 
        ]
      )
  }
}
</script>

//頁面使用 renderTest.vue這個(gè)組件
<template>
    <div class="father-div">
        <renderTest>
            <p>默認(rèn)插槽</p>
        </renderTest>
    </div>
</template>
<script setup lang="ts">
import renderTest from './renderTest.vue'
</script>

//renderTest.vue 文件
<script lang="ts">
import { h } from 'vue'
export default {
  setup(props, { slots }) {
    return () =>
      h(
        'div',
        null,
        [  
          //第三個(gè)參數(shù)建議使用函數(shù)返回.
          h('h1', null, '我組件的默認(rèn)內(nèi)容'), 
          h('h2', null, [slots.details?.()]), 
        ]
      )
  }
}
</script>

//頁面使用 renderTest.vue這個(gè)組件
<template>
    <div class="father-div">
        <renderTest>
           <template #details>
             <p>我是具名插槽中的內(nèi)容</p>
           </template>
        </renderTest>
    </div>
</template>
<script setup lang="ts">
import renderTest from './renderTest.vue'
</script>

//renderTest.vue
<script lang="ts">
import { h } from 'vue'
export default {
  props: {
    title: {
      type: String
    }
  },
  setup(props, { slots }) {
    return () =>
      h(
        'div',
        null,
        //接受父組件 props傳遞過來的數(shù)據(jù)，第三個(gè)參數(shù)建議使用函數(shù)返回
        props.title
      )
  }
}
</script>

//頁面使用 renderTest.vue這個(gè)組件
<template>
  <div class="father-div">
    <renderTest title="父組件給的數(shù)據(jù)"></renderTest>
  </div>
</template>
<script setup lang="ts">
import renderTest from './renderTest.vue'
</script>

//renderTest.vue 文件
<script lang="ts">
import { h } from 'vue'
//把按鈕作為標(biāo)簽需要導(dǎo)入
import { ElButton } from 'element-plus'
export default {
  props: {
    title: {
      type: String
    }
  },
  setup(props, { emit }) {
    return () =>
      h(
        'div',
        null,
        [ 
          //把按鈕作為標(biāo)簽需要導(dǎo)入
          h(ElButton, {
            type:"primary",
            // 注意這里需要使用箭頭函數(shù)，
            onClick: () => emit('myClick', '123')
          }, 
            //第三個(gè)參數(shù)建議使用函數(shù)返回。否者在控制有警告
            // Non-function value encountered for default slot. Prefer function slots for better performance. 
            ()=>'點(diǎn)擊我'
          )
  
        ]
      )
  }
}
</script>

//頁面使用 renderTest.vue這個(gè)組件
<template>
  <div class="father-div">
    <renderTest @myClick="myClick"></renderTest>
  </div>
</template>
<script setup lang="ts">
import renderTest from './renderTest.vue'
const myClick = (mess:string) => { 
    console.log('子組件給的數(shù)據(jù)', mess)
}
</script>

1.如果使用ElButton作為標(biāo)簽。需要引入import { ElButton } from 'element-plus'。
否則在頁面中無法正常解析。

2. 第三個(gè)參數(shù)建議使用函數(shù)返回。否者在控制有警告
Non-function value encountered for default slot. Prefer function slots for better performance. 

詳細(xì)地址 ：https://cn.vuejs.org/guide/extras/render-function.html#v-if