はじめに
これはVue1系で実装された社内向けツールをVue3系にバージョンアップした際の備忘録です。
以下の事柄を前提でこの記事は書かれています。
- Vue1系のみを触っていて、2系以降の知識がない状態でバージョンアップを実施した
- .vueファイルを用いた単一コンポーネントではなく、htmlファイルにjsを書くだけの形式で実装した
- Vue.jsの基本的な用語解説はない
アプリケーションの作成方法が違う
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系を触ることがあれば追記したいと思います。