VueJS

作成日時：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に登録してグローバルで使う

プラグイン | Vue.js

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を使用しなくても、リビルドしてサーバー上に配置すれば即時反映ができる

メリットはなんだ？