Vue2からVue3の最小限の移行

  プログラミング >     フロントエンド >  

仮想DOMのHTMLベースのテンプレートとして使いたい人向け

Vue2のバージョン違いなだけなので同じようにコーディングしても問題ないと思いきや、結構詰まったのでブログに書きました。

VueJS入門とかでググるより公式URLのほうがよっぽどわかりやすかったので、このページに訪れた人も公式ページを確認してないなら公式ページで確認して、それでもわからない場合はこちらのページが参考になるかなって思います。

 

インストール

インストールも公式以外のページが検索に引っかかってきて、ページに訪れるとnpmでインストールする方法ばかり。

<script src="https://unpkg.com/vue@next"></script>

とスクリプトを読み込めばすぐに使える手軽さが好きだったのにと思いながらも公式ページを確認するとスクリプトを読み込む方法が書かれていました。

インスタンスの作成

これもほとんどのページではSPAありきでVue3を作成していました。
自分としてはあくまでHTMLの中に部分的にVueJSを使いたいのでSPAのドキュメントは見たくないんですけど。。
やはりSPAにしたほうが、SPAを作ったエンジニアのキャリアと単価も上がります。
なのでSPAを記事にしたほうがPV数を稼げるという事もあります。

ここのブログで何度も取り上げている資本主義の世界だから仕方ないですけどね。

高いお金を産み出す方が人もお金も集まりやすい。

実質的な生産性はさておいて。

SPAのメリットはありますが、生産性が落ちるというデメリットもあるので、SPAにこだわる必要もないと思うのですが。。

 

コードで比較

それはさておきインスタンスの作成もVue2と3で違うので単純に２と３を記載しておきます。

Vue3はこれ

const app = { data() { return { message: 'Hello Vue!' } }, } Vue.createApp(app).mount('#app');

Vue2はこれ

var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' } });

インスタンス化の new Vueとしてる部分が違います。
Vue3はインスタンス化してないです。
appを定義して
Vue.createApp(app).mount('#app');
も違います。
dataも戻り値で返しているところが違います。

公式のページはちょっとサンプルとしては見づらいかもなので、もしかしてこっちのほうがわかりやすいかもです。

今のところはこれくらいなので、また色々出てきたらこのページに追記していこうかと思います。

 

by プログラマーこまつ