![見出し画像](https://assets.st-note.com/production/uploads/images/82357036/rectangle_large_type_2_249a2139757c9fdc07efd11881581da0.png?width=1200)
Vueを学ぶ3日目②~5日目
7月3日~7月9日週、3日間勉強できました。
3日目②Vueインスタンスでリアクティブ
リアクティブなプロパティにするにはインスタンス生成時に定義する必要があるようです。
vueインスタンスを生成するときに渡すオプションオブジェクト。
— タツノリ (@KPlus33) July 3, 2022
dataで指定したプロパティはリアクティブシステムに追加されます。
但し、インスタンス生成後に追加したプロパティは対象外のようです。
vm = new Vue({
data: {
a: 1 //リアクティブ
}
})
vm.b=2 //リアクティブじゃない
4日目computedとwatchを何となく理解する
computedもwatchもリアクティブに値を変更する時の作法のようです。computedの方がvmでよくやっていたイメージです。
今後作りながら使い分けられるようになっていきたいと思います。
vueの算出プロパティ(computed)、watchはリアクティブに値を加工する時に使う。
— タツノリ (@KPlus33) July 5, 2022
初めてc言語を勉強した時のforとwhileを習った時に似てる🙂
5日目Vueの構文を学ぶ
v-if、v-for、pythonを学んだ時に少しだけFlaskを触りましたが、そのイメージですね。フロントエンド(Vue等のフレームワーク)でもバックエンド(Flask等)でもUIを作れるのならどちらで実装するのがよいのでしょう?
と疑問に思いました。
バックエンドでUIを作る場面や特徴
規模が小さかったり画面が単純でフロントエンドのフレームワークを利用しない場合
クライアントへのレスはHTML形式になるためクライアント側は表示するだけでよい
反対にサーバ側の作業が大きくなる
画面表示までのレスポンスが遅くなる?
思いつく限りで書いてみました。最後のレスポンスが遅くなるというのはどうなんでしょう。フロントエンドのフレームワークを入れる場合も最初はフレームワークの読み込みとかで時間がかかりそうな気がします。
なので、1番上に書いた規模や複雑さ(フロントエンドとバックエンドで非同期通信をする等)によりどちらで実装するのが効率的か判断するのかなと思いました。
少しづつ学んでいきたいと思います。
この記事が気に入ったらサポートをしてみませんか?