コンポーネントの登録での自動変換について

Vueは自動でキーをキャメルケースからケバブケースに変換する。
これはhtmlにコンパイルした時にhtmlがケバブケースしか理解できないために行なっている。

この処理が自動で行われているのでコード上で理解できず当初だいぶ困惑した。
componentsの登録の際はキーを省略せずにちゃんとケバブケースで実際に使用される名前を書いてあげる方が混乱を生まずに住む。

❌キーを省略

import HeaderText from './components/HeaderText.vue';

new Vue({
  el: '#app',
  components: {
    HeaderText,
  }
})

⭕️キーを明記

import HeaderText from './components/HeaderText.vue';

new Vue({
  el: '#app',
  components: {
    "header-text": HeaderText,
  }
})

imgのsrcのパスを子コンポーネントに渡す方法

@image/icon/default.png というpathを渡したい場合、propsでののまま渡すとパス解決されない。

<img src="@image/icon/default.png" >

解決策としてはリアクティブシステムを通してパスを渡す。

<User
  :iconUrl="defaultIconPath"
/>

  data() {
    return {
      defaultIconPath: require("@image/icon/defaultpng"),
    }
  }

エラー検知にRollBarを使っていたのでVueの共通ファイルを作成してその中でRollBarにエラーを投げる設定を行った

objectのプロパティまでreactiveにしたい場合はtoRefs
個人的にはちゃんと使い分けるというより、常にtoRefs使えば良いのではと思ってしまった。

v-ifで出し分けをするtemplateが両方とも同じ要素を使用する場合、Vueは極力再描画を減らすよう努力するため変化がないと意図せず再利用されちゃうよという話が怖いなと守った。

inputのだしわけとか、普通にやりそうなので気をつけたいと思った。
keyをつけることで再利用しないようにすることができる。