はじめに

これはVue1系で実装された社内向けツールをVue3系にバージョンアップした際の備忘録です。

以下の事柄を前提でこの記事は書かれています。

アプリケーションの作成方法が違う

vue1系

var app = new Vue({
    ...
});

vue3系

var app = createApp({
    ...
});

そもそも基幹となるアプリケーションの作成の記述方法が異なる。

作成済みのアプリケーションを継承したい場合の書き方は更に異なる。

vue1系

var extendApp = app.Extend({
    ...
});

vue3系

var extenApp = createApp({
    extends : app,
});

vue1系

var app = new Vue({
    el : '#templete',
});

vue3系

var app = createApp({
    ...
}).mount('#templete');

書き方が大きく異なるが、3系では同じ内容のアプリケーションを使い回ししやすくなった。

ただし、テンプレートを指定する場合は3系でも従来の書き方になるため、そこだけややこしい。

DOMノード生成後に処理をしたい場合のフックがreadyからonMountedに変わった。
処理タイミング自体は変わらないため、1系からそのままコードを引っ張ってきた場合、修正を忘れないようにしないと動かなくなる。

アップデートを行った社内ツール自体にそこまで凝った機能がないため、最低限の内容のみになりました。
今後さらに3系を触ることがあれば追記したいと思います。