やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

vue.js3のcreateApp()について調べる

 謎のメソッドたちを把握する。

情報源

コード

 Vueオブジェクトを生成する。3版では以下のように書く。

Vue.createApp({setup(){return{};}}).mount('#app');

 Vueオブジェクトの内容を見る。

var app = Vue.createApp({setup(){return{};}}).mount('#app');
console.log(app);

 以下のようなメンバがあった。App API参照。

メソッド 概要
component() グローバルコンポーネントを登録・取得する。
directive() グローバルディレクティブを登録・取得する。
mixin() コンポーネントのテンプレートに混入させる。
mount() 表示する。指定したDOM要素にアプリをマウントする。
provide() 値を設定する。アプリ内の全コンポーネントに注入できる値を。
unmount() 非表示にする。アプリをアンマウントする。
use() Vue.jsプラグインをインストールする。
プロパティ 属性 概要
config get,set アプリ構成を含むオブジェクト。

所感

 mount()さえ知っていればいいかな。今はまだ。

 それよりsetup()のほうが大事。なのに情報がない。ググってもdata()で書いてあるほうが多い。setup()は新しいからかな? なにより厄介なのはリアクティブシステムと一緒に使うのが真骨頂だということ。以下で簡単に使ってみた。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux