vueの中のrender関数の作用の詳しい解

4909 ワード

vue レンダー関数

レンダー関数作用
vueレンダリング関数の文書は初めて見たので、くらくらしました。もう一度見て書いてやっと分かりました。文書に協力して読むことを提案して、本文も文書によって自分の理解を加えます。
注：このコードはすべて単一ファイルコンポーネントで作成します。コードアドレス
レンダー関数作用
レンダー関数はtemplateと同じようにhtmlテンプレートを作成していますが、いくつかのシーンではtemplateでコードが冗長で、多くの重複があります。この場合はレンダー関数を使うことができます。
公式サイトの例：サブコンポーネントは、親コンポーネントによって伝達されるレベル値（1−6）によってレンダリングラベルhの数を決定したい。具体的なコードは文書を見ることができます。
レンダー関数解説
レンダリング関数は、関数です。パラメータも関数です。つまり、createelementです。私たちは主にcreateelementパラメータです。
レンダー関数の戻り値(VNode)
VNode（すなわち仮想ノード）、つまり私たちがレンダリングするノードです。
render関数のパラメータ(createelement)
createelementはrender関数のパラメータであり、それ自体も関数であり、三つのパラメータがあります。
createElement関数の戻り値(VNode)
createElement関数の戻り値はVNode（すなわち仮想ノード）です。
createElement関数のパラメータ（3つ）
HTMLラベル文字列、コンポーネントオプションオブジェクト、または上記のいずれかのasync非同期関数を解析します。タイプ：{Stering𞓜Object|Fnction}必要です。
テンプレート関連の属性を含むデータオブジェクトは、templateでこれらの特性を使用することができます。タイプ：{Object}オプション。
サブ仮想ノード（VNodes）は、createElement（）によって構築され、文字列を用いて「テキスト仮想ノード」を生成することもできる。タイプ：{String Aray}オプション。
結合コード


/**
 * render:     
 *   : createElement
 *     : Function
 */
 render: function (createElement) {
  let _this = this['$options'].parent //       .vue     components    ，       this
  let _header = _this.$slots.header  // $slots: vue       ，      default 
 
  /**
  * createElement         ，      
  *    : VNode，     
  * 1.    HTML      ，      ，              async     。    。{String | Object | Function} -             
  * 2.                     template        。    。{Object} - 1       
  * 3.       (VNodes)，  `createElement()`     ，           “      ”。    。{String | Array} - 1    ，    createElement()   ，          
  */
  return createElement(    
   // 1.         ：     【  】   
   'div',  
   // 2. 1         ，      ：     【  】
   {
    style: {
     color: '#333',
     border: '1px solid #ccc'
    }
   },
   // 3. 1            ：     【  】
   [
    'text',  //           
    _this.$slots.default, //        ，    
    createElement('div', _header)  // createElement()   VNodes
   ]
  )
 }

コンソールから印刷された$slaotsを見ることができます。
在这里插入图片描述

次に具体的なコードを通してレンダー関数を見てみます。どうやって使いますか？
例:

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

データの対象に深く入る
テンプレートの文法では、v-bind:classとv-bind:styleが特別扱いされるように、VNodeのデータオブジェクトの中で、下記の属性名はレベルが一番高いフィールドです。オブジェクトはまた、一般的なHTML特性を、DOM属性のように、innerHTML（v-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<VNode> }
 scopedSlots: {
 default: props => createElement('span', props.text)
 },
 //              ，        
 slot: 'name-of-slot',
 //         
 key: 'myKey',
 ref: 'myRef'
}

締め括りをつける
ここでvueのrender関数の役割について詳しく説明した文章を紹介します。vue render関数の機能内容については以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。

vue-cli 3+typescriptに基づくtsx開発テンプレート構築過程を共有する。

AS.NET Core 2.2におけるEndpointルートの詳細