takc-techVueJS
作成日時：2024-08-01以前
更新日時：2024-08-01
ディレクティブ
属性に値を設定。{id:“a”, class:“b”}とかオブジェクトもできる
v-bind:id=""
:id
v-on:click @click
{{単一式}}
v-bind:[変数名]=""
data内部に書かないとトリガーされない
methodsはfunction定義でないとthis参照がいかれる。
逆にその内部で定義する関数は、アローじゃないとthis参照できん。
nextTick()
DOMの更新を待つ。
computed
computedとはtemplateを汚さない算出プロパティ
変更なければキャッシュを返すのみ
関数でも実現できるがそっちは描画のたびに計算が入る
computedは副作用を避ける 加工して出すだけ
v-showとv-if
頻繁に表示切り替えるならv-showそうでないならv-if
dataを変更しても画面に変更されない
dataに定義した変数へapiから取得したデータを突っ込んでも反映されない
原因はcallbackをfunctionで定義していたから。
this.xxxとやってもthisが別の所を指しているのでdataに入らない。
アローならいける。
アローとfunctionのthisを同じと思ってはいけない。
app.useに登録してグローバルで使う
JSONをモジュールとして読み込む
tsconfig.jsonのcompilerOptions.resolveJsonModuleをtrueにする。
特定ファイルをバンドル対象外にしたい時
環境変数に紐づくJSONを読み込んでなんやかんやする処理において、
対象外のJSONはバンドル対象外にしたかった。
null-loaderを使用したらエラーが出た。
null-loaderが対象ファイルの内容を空にしているらしく、
resolveJsonModuleによってJSONパース時にエラーが発生したっぽい。
ignore-loader使っとけ。
// vue.config.js
const path = require("path");
const env = process.env.VUE_APP_XXX;
module.exports = {
chainWebpack: config => {
config.module
.rule("something")
.test(filePath => {
const fileName = path.basename(filePath);
return false;
})
.use("ignore-loader")
.end();
}
}
// 定義ファイル
export const foo = {
install: (app: App) =? {
app.config.globalProperties.$foo = 関数またはオブジェクト
}
}
// i18nみたいに任意の関数をグローバルに持たせたい場合
app.use(foo).mount("xxx");
ビルド先や国に応じて文言を変えたい
「vue-i18n」を使う
- 設定/導入が容易
- 開発が止まっていない
- スポンサー/スターが多い
- 文言定義をDBから取得出来たりもする
- 外部ソースを使用しての多言語対応がサポートされているため
- 読込処理のみを切り替えれば、容易に修正できる
おおよその実装
- 文言はビルド先ごとのメッセージファイルに定義する。
- 「vue-i18n」でこれを読み込み、画面に文言を適用する。
- ビルド先文言のファイルには、デフォルトとの差分のみを記載することにより、管理負荷を下げる。
- 定義されていなければ、フォールバックしてデフォルトの文言を表示する。
- バンドルの際、対象の文言定義ファイル以外のメッセージファイルはバンドルしない。
- 混ぜたらJSを解析することで、本システムを使用するユーザーが知られてしまう可能性が発生する。
- 可能性は低いので必要性は低いが、JSのファイルサイズを減らしたいので行う。
DBから取得する方法に関して
基本的に以下の理由でやりたくない。
- DBへの負荷、通信量
- 文言を取得するまでの遅延/描画崩れ
- キャッシュの挙動
- リロード時の挙動
- そもそもDBを使用しなくても、リビルドしてサーバー上に配置すれば即時反映ができる
メリットはなんだ？
mixin
Options APIの話。
コンポーネントに共通の定義を混ぜる事ができる。
継承ではない。
それを使用するコンポーネントの記述量は減るが、いろいろとデメリットがある。
Composition APIを使った方がいいらしい。