Vueを学ぶ３日目②～５日目

７月３日～７月９日週、３日間勉強できました。

３日目②Vueインスタンスでリアクティブ

リアクティブなプロパティにするにはインスタンス生成時に定義する必要があるようです。

vueインスタンスを生成するときに渡すオプションオブジェクト。
dataで指定したプロパティはリアクティブシステムに追加されます。
但し、インスタンス生成後に追加したプロパティは対象外のようです。

vm = new Vue({
data: {
a: 1 //リアクティブ
}
})
vm.b=2 //リアクティブじゃない

— タツノリ (@KPlus33) July 3, 2022

４日目computedとwatchを何となく理解する

computedもwatchもリアクティブに値を変更する時の作法のようです。computedの方がvmでよくやっていたイメージです。
今後作りながら使い分けられるようになっていきたいと思います。

vueの算出プロパティ（computed）、watchはリアクティブに値を加工する時に使う。

初めてc言語を勉強した時のforとwhileを習った時に似てる🙂

— タツノリ (@KPlus33) July 5, 2022

５日目Vueの構文を学ぶ

v-if、v-for、pythonを学んだ時に少しだけFlaskを触りましたが、そのイメージですね。フロントエンド(Vue等のフレームワーク)でもバックエンド(Flask等)でもUIを作れるのならどちらで実装するのがよいのでしょう？
と疑問に思いました。

バックエンドでUIを作る場面や特徴

• 規模が小さかったり画面が単純でフロントエンドのフレームワークを利用しない場合

• クライアントへのレスはHTML形式になるためクライアント側は表示するだけでよい

• 反対にサーバ側の作業が大きくなる

• 画面表示までのレスポンスが遅くなる？

思いつく限りで書いてみました。最後のレスポンスが遅くなるというのはどうなんでしょう。フロントエンドのフレームワークを入れる場合も最初はフレームワークの読み込みとかで時間がかかりそうな気がします。
なので、１番上に書いた規模や複雑さ(フロントエンドとバックエンドで非同期通信をする等)によりどちらで実装するのが効率的か判断するのかなと思いました。

少しづつ学んでいきたいと思います。