Vue.jsにおけるマウントについて

目的

当記事は筆者の学習アウトプットを目的としております。
もしご覧になった方で当記事の内容に誤りがあった際は、ご指摘頂けると幸いでございます。

今回はVue.jsにおける「マウント」について触れます。

マウントとは

広義的な意味としての、IT分野における「マウント」という言葉の意味は以下の通りとなっております。

【マウントとは、コンピュータに接続した周辺機器や外部記憶装置等をオペレーティングシステム（OS）に認識させ、利用可能な状態にすることを指します。 例えばクラウドサービスにおいて、イメージディスクとよばれるISOファイルを仮想マシン上で認識させることを「ISOファイルのマウント」と呼びます。】　※クラウド・データセンター用語集参照
https://www.idcf.jp/words/mount.html#:~:text=%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF%E3%80%81%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%81%AB,%E3%81%AE%E3%83%9E%E3%82%A6%E3%83%B3%E3%83%88%E3%80%8D%E3%81%A8%E5%91%BC%E3%81%B3%E3%81%BE%E3%81%99%E3%80%82

筆者の解釈だと、
【AにBをぶち込み、Aの中でBを使えるようにする】
みたいなイメージを持っています。かなり雑な考え方だとは思いますが…。

じゃあ、Vue.jsの中ではどうなの？

Vueのインスタンスをマウントすると、指定したHTML要素はVueが生成するHTML要素に置き換わります。Vueインスタンスで定義した機能などは、マウントしたHTML要素とその子孫の要素でのみ使用可能です。

例えば、「

」の内部でのみVueインスタンスで定義した機能を使用できます。

sample.html

<div id="app>
<!--この中でのみVueインスタンスで定義した機能を使用できる-->
</div>

マウントしてみよう

Vueインスタンスはmountというメソッドを持っています。
その引数にセレクターの文字列を渡すことでマウントができます。

sample.js

Vue.createApp({
//ここにアプリケーションの機能を定義する
}).mount("#app") //Vue.createApp({})がインスタンス！

以上のコードは「

という一つのHTML要素にマウントしている状態」ということとなります。

最後に

以下、ポイントをあげていきます。
・Vue.jsではVueインスタンスを作成してマウントすることで、Vueアプリケーションを動作させる
・Vueインスタンスの作成にはVue.createAppメソッドを使用する
・Vue.createAppの引数に機能を定義していく
・Vueインスタンスのマウントにはmountメソッドを使用
・マウントしたHTML要素はVueが生成するDOMに置き換わり、その内部でのみVueの機能が利用できる