render関数は何ですか.

render関数は何ですか.
簡単に言えば、vueではテンプレートHTML構文を使用してページを作成し、render関数を使用してjs言語でDOMを構築することができます.
vueは仮想DOMなので、templateテンプレートを取得する際にもVNodeの関数に変換し、render関数でDOMを構築すると、vueは変換の過程を免除します.
render関数を使用して仮想DOMを記述する場合、vueは仮想DOMを構築するために必要なツールである関数を提供します.公式サイトで彼にcreateElementという名前をつけた.
render関数の使い方

render:(h) => {
  return h('div',{
　　　// div  value  
     props: {
         value:''
     },
　　　// div    
　　　style:{
　　　　　width:'30px'
　　　},　
　　　// div      　　
     on: {
         click: () => {
            console.log('    ')
         }
     },
  })
}

深いdataオブジェクト
テンプレート構文でv-bind:classとv-bind:styleが特別に扱われるように、VNodeデータオブジェクトでは、以下のプロパティ名が最もレベルの高いフィールドであることに注意してください.このオブジェクトでは、DOMプロパティのようにinnerHTML(v-htmlコマンドの代わりになります)のように、通常のHTMLプロパティをバインドすることもできます.

{
 //  `v-bind:class`    API
 'class': {
  foo: true,
  bar: false
 },
 //  `v-bind:style`    API
 style: {
  color: 'red',
  fontSize: '14px'
 },
 //     HTML   
 attrs: {
  id: 'foo'
 },
 //    props
 props: {
  myProp: 'bar'
 },
 // DOM   
 domProps: {
  innerHTML: 'baz'
 },
 //         `on`
 //         `v-on:keyup.enter`    
 //        keyCode。
 on: {
  click: this.clickHandler
 },
 //      ，        ，         
 // `vm.$emit`      。
 nativeOn: {
  click: this.nativeClickHandler
 },
 //      。  ，     `binding`    `oldValue`
 //   ，   Vue            。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '1 + 1',
   arg: 'foo',
   modifiers: {
    bar: true
   }
  }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 //              ，        
 slot: 'name-of-slot',
 //         
 key: 'myKey',
 ref: 'myRef'
}