Web猫ブログ
個別のDOMに突っ込んで描画する
個別のDOMに突っ込んで描画する
07月 08日

Vueインスタンスを生成する

描画方法は主に、

  1. Vueインスタンスを生成する
  2. ドキュメント外 (main.js) で個別のDOMに突っ込んで描画する

前者がごく一般的な方法かと思います。 Vue CLI を採用すると以下のように main.js で Vueインスタンスを生成します。前提として vue-router を使ってルーティングリストを準備しましょう。

vue-cli

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

ドキュメント外 (main.js) で個別のDOMに突っ込んで描画する

コンポーネントごと DOMを準備すること。画面描画と違い、部分描画を目指しています。

vm-mount

import HelloWorld from '@/components/HelloWorld.vue'

const HelloWorldClass = Vue.extend(HelloWorld)

const HelloWorldInstance = new HelloWorldClass().$mount()

document.getElementById('hello-world').appendChild(HelloWorldInstance.$el)

実際にアプリケーションに組み込む場合、極力外部に切り出しておきましょう。

export const AppendComponent = (
    component: VueConstructor,
    id: string
) => {
    const ComponentClass = Vue.extend(component)
    const ComponentInstance = new ComponentClass().$mount()
    if (document.getElementById(id) != null) {
        document.getElementById(id).appendChild(ComponentInstance.$el)
    }
}

速度改善どーなの。。?

そもそも直DOMというツラミが存在。コンポーネントが増えるほど、 DOMへのアクセスがボトルネックになります。

performance.now() を使って簡単に速度計測できます。

const startedAt = performance.now()

for (let index = 0; index < 1000; index++) {
    AppendComponent(HelloWorld, 'hello-world-' + index)
    // 随時追加
}

// 開始時間を計測します
const elapsedAt = performance.now() - startedAt
console.log(`DOM作成に ${elapsedAt}`)

また以下 Vue Performance Toolでも計測させていただきましたが、その詳細はまた後日。

Vue Performance Tool

コメントを残す

タイトル
メールアドレス
詳細

あわせてよみたい..

-----