Vueのrenderメソッドのhとは何ですか?

                                                       

vue をしばらく使ったことがある方は、アプリ ファイルで rendering メソッドに遭遇したことがあるかもしれません。 version これは CLI のデフォルト値であり、main.js ファイルにあります:

new Vue({
 render: h => h(App)
}).$mount('#app')

または render メソッド ( function)、JSX:

Vue.component('jsx-example', {
  render (h) {
    return <p id="foo">bar</p>
  }
})

を使用する可能性があります。h は何に使用されるのか知りたいかもしれません。それはどういう意味ですか？ h は ハイパースクリプト を表します。これは HTML の一部であり、Hypertext Markup Language の略です。スクリプトに取り組んでいるとき、それを使用して仮想 DOM ノードを置き換えるのが慣例となっています。この定義は他のフレームワーク文書でも使用されます。詳細はこちら Cycle.js。

この問題について、Evan は次のように説明しました:

ハイパースクリプト自体は「HTML 構造を生成するスクリプト」を表します。

h と省略します。タイプ。彼は、Frontend Masters の高度な Vue ワークショップでもこれについて説明しています。

実際のところ、これは createElement の短縮形と考えることができます。これは長い形式になります:

render: function (createElement) {
  return createElement(App);
}

これを h に置き換えると、次のようになります:

render: function (h) {
  return h(App);
}

... これは、次のように短縮できます。 ES6 :

render: h => h (App)

Vue バージョンには最大 3 つのパラメータが必要です:

render(h) {
  return h('p', {}, [...])
}

• 最初のパラメータは要素のタイプです (ここでは p として示されています)。

• #2 つ目はデータ オブジェクトです。ここには主に、props、attrs、dom props、class、style が含まれます。

• 3 つ目は、子ノードのグループです。次に呼び出しをネストし、最終的に仮想 DOM ノード ツリーを返します。

さらに詳しい情報については、Vue ガイドをご覧ください。

名前

ハイパースクリプト は、実際には小さなエコシステムを持つライブラリ (最近は更新されていません) の名前であるため、混乱する人もいるかもしれません。この場合、私たちはその特定の実装について話しているのではありません。

これで混乱している人たちの問題が解決されることを願っています。

推奨チュートリアル:「

JS」

以上がVueのrenderメソッドのhとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。