Open11

Vue Tips

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

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"),
    }
  }

参考

http://tk2000ex.blogspot.com/2017/11/vue.html

reactive vs toRefs

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

v-ifの落とし穴 (key)

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

詳しい説明と挙動はこちら。

https://jp.vuejs.org/v2/guide/conditional.html#key-による再利用可能な要素の制御

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

ログインするとコメントできます