仮想DOM私はほとんどの人が精通していないと信じて、この概念は、それが生成提供DOMは非常に「高価」であるブラウザは、より直感的な感触のために、我々は単純にdiv要素の簡単な属性が印刷されて置くことができています示すように、アウト：
あなたは本当のDOM要素を見ることができる標準的なブラウザDOMはデザインが非常に複雑で置くので、非常に大きいです。私たちはDOM頻繁に更新を行うと、いくつかのパフォーマンスの問題を有していてもよいです。
JSは、仮想DOMは、DOMノードを記述するために、ネイティブオブジェクトを使用することですので、DOMを作成するためのコストよりははるかに小さいです。でVue.jsでは、仮想DOMが使用されている VNode 中で定義されているように、クラス、記述すること src/core/vdom/vnode.js 。
export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array<VNode>; text: string | void; elm: Node | void; ns: string | void; context: Component | void; // rendered in this component's scope key: string | number | void; componentOptions: VNodeComponentOptions | void; componentInstance: Component | void; // component instance parent: VNode | void; // component placeholder node // strictly internal raw: boolean; // contains raw HTML? (server only) isStatic: boolean; // hoisted static node isRootInsert: boolean; // necessary for enter transition check isComment: boolean; // empty comment placeholder? isCloned: boolean; // is a cloned node? isOnce: boolean; // is a v-once node? asyncFactory: Function | void; // async component factory function asyncMeta: Object | void; isAsyncPlaceholder: boolean; ssrContext: Object | void; fnContext: Component | void; // real context vm for functional nodes fnOptions: ?ComponentOptions; // for SSR caching fnScopeId: ?string; // functional scope id support constructor ( tag?: string, data?: VNodeData, children?: ?Array<VNode>, text?: string, elm?: Node, context?: Component, componentOptions?: VNodeComponentOptions, asyncFactory?: Function ) { this.tag = tag this.data = data this.children = children this.text = text this.elm = elm this.ns = undefined this.context = context this.fnContext = undefined this.fnOptions = undefined this.fnScopeId = undefined this.key = data && data.key this.componentOptions = componentOptions this.componentInstance = undefined this.parent = undefined this.raw = false this.isStatic = false this.isRootInsert = true this.isComment = false this.isCloned = false this.isOnce = false this.asyncFactory = asyncFactory this.asyncMeta = undefined this.isAsyncPlaceholder = false } // DEPRECATED: alias for componentInstance for backwards compat. /* istanbul ignore next */ get child (): Component | void { return this.componentInstance } } それは多くの人がここの特徴をVue.js含まれているため、仮想DOMの定義で見ることができVue.jsは少し複雑です。ここでは、実際にVue.js仮想DOMでオープンソースのライブラリから借りているプロパティのこれらの膨大な数を怖がってはいけない snabbdom達成し、その後、いくつかのVue.js特別なものを追加しました。私はあなたがそれをよりシンプルかつ純粋であるので、仮想DOM Vue.js前に、ライブラリのソースコードを読むことによって多くを学ぶために望むことができることを示唆しています。
概要
実際にVNODEは、実際のDOMの抽象的な記述は、そのコアの定義は、などいくつかの重要な属性以外の何物でも、タグ名、データ、子ノード、キー、ではないです、他のすべての属性がVNODEを、柔軟性を実現し、拡張するために使用されています特別な機能の一部。唯一の本当のVNODE DOMのレンダリングをマッピングするために使用されるので、DOM操作はメソッドを含む必要がないので、それは非常にシンプルで軽量です。
そのデータ構造を定義することに加えて、仮想DOMは、実際にはvnodeの作成、デフ、パッチおよび他のプロセスを経る実際のDOMにマッピングされています。その後VNODE、中Vue.jsは、前述を通じて作成 createElement 作成方法、我々は分析のこの部分を実装しようとしています。
-----------------スイッチドネットワークVUEソースムークラスは-----------------ビデオチュートリアルの内容を解析し、