序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。
<div id="アプリ"> <私のボタン></私のボタン> </div> <スクリプト> Vue.component("my-button", { テンプレート: "<button> ボタンコンポーネント</button>", }); vm = new Vue({ el:'#app' }); </スクリプト> グローバルコンポーネント解析の原則コンポーネントの分離を保証するために、各コンポーネントは extend メソッドを通じて新しいクラスを生成し、親クラスを継承します。そして、ユーザーが Vue.component メソッドを通じて渡した opts を vue.options.components にマージし、vue が初期化されるときに Vue.options.components と vm.$options.components をマージします。 1. Vue.component メソッドVue.options._base = Vue; //\_baseからvueを見つけることができます Vue.options.components を次のように記述します。 Vue.component = 関数 (id, 定義) { //各コンポーネントは、親を継承する新しいクラスを生成します。definition = this.options._base.extend(definition); console.log("1. Vue に基づいてコンポーネントのコンストラクターを作成する", definition); this.options.components[id] = 定義; }; 2. Vue.extend メソッドextend メソッドは、Vue から継承し、親クラスのすべての機能を持つクラスを生成します。 '../util/index' から {mergeOptions} をインポートします Vue.extend = 関数 (定義) { Vue.js は、次のコードで定義されます。 const Sub = 関数 VueComponent(オプション) { this._init(オプション); }; Sub.prototype = Object.create(Vue.prototype); Sub.prototype.constructor = Sub; Sub.options = mergeOptions(Vue.options, 定義); Sub を返します。 }; 3. 属性の結合Vue.options と Vue.component(definition) によって渡された定義をマージします。 strats.components = 関数 (親値、子値) { オプションを Object.create(parentVal); に設定します。 if (childVal) { for (let key in childVal) { オプション[キー] = childVal[キー]; } } 戻りオプション。 }; 4. マージを初期化するVue.options.components と vm.$options.components をマージする Vue.prototype._init = 関数 (オプション) { 定数 vm = this; ++ vm.$options = mergeOptions(vm.constructor.options, オプション); //... 初期化状態(vm); (vm.$options.el)の場合{ //このテンプレートにデータをマウントします vm.$mount(vm.$options.el); } }; さて、ここではグローバル コンポーネントの解析を実装しました。 次に、Kang Kang コンポーネントがどのようにレンダリングされるかを見てみましょう。 コンポーネントレンダリングの原則仮想ノードを作成するときは、isReservedTag を使用して、現在のタグがコンポーネントであるかどうかを判断する必要があります。共通タグの仮想ノードは、コンポーネントの仮想ノードとは異なります。タグがコンポーネントである場合は、コンポーネント vnode をレンダリングする必要があります。 エクスポート関数isReservedTag(str) { reservedTag = "a,div,span,p,img,button,ul,li" とします。 reservedTag.includes(str) を返します。 } 1. コンポーネント仮想ノードを作成するcreateComponentはコンポーネントの仮想ノードを作成し、データにフックがあるかどうかでコンポーネントかどうかを区別します。 エクスポート関数 createElement(vm, タグ, データ = {}, ...children) { // タグがコンポーネントの場合、コンポーネントのvnodeをレンダリングする必要があります if (isReservedTag(タグ)) { vnode(vm, tag, data, data.key, children, undefined) を返します。 } それ以外 { const Ctor = vm.$options.components[タグ] createComponent(vm、タグ、データ、データキー、子、Ctor) を返します。 } } // コンポーネントと要素を区別するために、コンポーネントの仮想ノードを作成します。data.hook 関数createComponent(vm, タグ, データ, キー, 子, Ctor) { // コンポーネントコンストラクタ if (isObject (Ctor)) { Ctor = vm.$options._base.extend(Ctor); // Vue.extend } data.hook = { // この初期化メソッドはコンポーネントをレンダリングするときに呼び出す必要があります init(vnode){ let vm = vnode.componentInstance = new Ctor({_isComponent:true}); // 新しい Sub はこのオプションとコンポーネント構成を使用してマージします vm.$mount(); // コンポーネントがマウントされると、vnode.componentInstance.$el に格納されます } } vnode(vm,`vue-component-${tag}`,data,key,undefined,undefined,{Ctor,children}) を返します } 2. コンポーネントの実際のノードを作成するtypeof tag === "string" の場合、コンポーネントの仮想ノードである可能性があり、createComponent が呼び出されます。 エクスポート関数 patch(oldVnode,vnode){ // 1. 更新するかレンダリングするかを決定する if(!oldVnode){ createElm(vnode) を返します。 }それ以外{ // ... } } 関数createElm(vnode) { {タグ、データ、子、テキスト、vm} = vnodeとします。 if (typeof タグ === "文字列") { コンポーネントを作成する場合(vnode) { // コンポーネントに対応する実際のノードを返します return vnode.componentInstance.$el; } vnode.el = document.createElement(tag); // 仮想ノードには、実際のノードに対応するel属性が設定されます children.forEach((child) => { vnode.el.appendChild(Elm(child) を作成します); }); } それ以外 { vnode.el = document.createTextNode(テキスト); } vnode.el を返します。 } createComponentは、データにhook.initメソッドがあるかどうかによって、コンポーネントが仮想ノードであるかどうかを判断します。 はいの場合は、コンポーネントでdata.hook.initを呼び出します。 コンポーネントインスタンスを作成し、vnode.componentInstanceに割り当てます。 vnode.componentInstance に値がある場合、対応するコンポーネントの実際の DOM が生成されたことを意味します。 関数createComponent(vnode) { i = vnode.data とします。 if((i = i.hook) && (i = i.init)){ i(vnode); } if(vnode.componentInstance){ true を返します。 } } initメソッドを呼び出してコンポーネントのインスタンスを作成し、マウントします。 データ.フック = { init(vnode){ 子を vnode.componentInstance に新しい Ctor({}) として追加します。 child.$mount(); // コンポーネントのマウント} } まとめ新しいコンポーネント (). $mount () => vm. $el コンポーネントの$elを親コンテナ(親コンポーネント)に挿入します。 完了しました! 上記は、Vue コンポーネントがどのように解析され、レンダリングされるかを示しています。 Vue コンポーネントの解析とレンダリングの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Vueはキー表示のショートカットキー効果を取得する入力コンポーネントを実装します
基本構造:コードをコピーコードは次のとおりです。 <ダウンロード> <dt>...
はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのペ...
以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...
おすすめの記事: CSS 疑似クラスの右下隅をクリックすると、選択を示すチェックマークが表示されます...
まず、仮想マシンを開きます xshell5 を開いて仮想マシンに接続します (より便利です。Linu...
序文:この記事では主に、MySQL の where、group by、order by、limit、...
<div align="center"> <table sty...
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...
jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...
Vue プロジェクトを開発する場合、さまざまなコンポーネント ページを表示するために切り替えることが...
最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...
ユーザーから情報を収集する場合、Web フォームを使用するより簡単で直接的な方法はありません。適切に...
TW のメインテキスト ページは、以前は小さなモニターと低解像度のユーザーを考慮して幅が 850 ピ...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...