【Vue.js】記法の違いまとめ #JavaScript

はじめに

Vue.jsを勉強するにあたり、この書き方ってどう違うの？と思ったものをまとめました。
少しJavaScriptも混ざっていますが、お気になさらず。

Q. `function()`を使う書き方とそうでない書き方は何が違うの？

export default {
  methods: {
    // A
    method: function(arg) {
      console.log("メソッドAです")
    },

    // B
    method(arg) {
      console.log("メソッドBです")
    },
  },
};

A. `method: function()`を短縮したものが`method()`です。

method()という記法はES2015(ES6)で導入された短縮形です。ES5では対応していません。
参考：メソッド定義 - JavaScript | MDN

Q. `data`の表記がいろいろあるんだけど？

export default {
  // A
  data: {
    name: "太郎",
    age: 10
  },

  // B
  data: function() {
    return {
      name: "太郎",
      age: 10
    };
  },

  // C
  data() {
    return {
      name: "太郎",
      age: 10
    };
  },
};

A. コンポーネントで使う場合は関数にしなければなりません。

Aのパターンでは、以下参考サイトのようにコンポーネントでデータが独立しなくなってしまいます。そのため、少なくともコンポーネントではdataは関数（BかCの形）にする必要があります。BとCに違いについては前述のとおりです。

コンポーネントのdataオプションは関数でなければなりません。各インスタンスが返されるデータオブジェクトの独立したコピーを保持できるためです:
コンポーネントの基本 — Vue.js

区別するのもややこしいので、基本的にすべて関数で書くようにすればいいと思います。
関数で書くデメリットはない気がします……。

Q. `v-for`の`in`, `of`って使い分けとかあるの？

<div v-for="item of list">
<div v-for="item in list">

A. ないです。

意味は全く同じなので、同じプロジェクト内で統一して使うようにすればいいと思います。

区切り文字としてinの代わりにofを使用することができます。これは JavaScript のイテレータ構文に近いものです
リストレンダリング — Vue.js

イテレータ構文は以下のような書き方をします。

for (variable of iterable) {
  statement
}

引用：for...of - JavaScript | MDN

Q. `props`の書き方は何が違うの？

export default {
  // A
  props: ["name", "user"]

  // B
  props: {
    name: String,
    user: Object,
    },

  // c
  props: {
    name: {
      type: String,
      default: "",
      required: true,
    },
    user: {
      type: Object,
      default: () => {},
      required: true,
    },
  },
};

A. 型を指定しているかどうかです。

Aのパターン
- 型を指定していないため、渡されたデータの型が何であろうと代入する。警告も出ない。
Bのパターン
- 型を指定しているため、違う型のデータが渡された場合は警告を表示する。
Cのパターン
- 型を指定し、かつデフォルト値を設定する。
- Array, Objectのデフォルト値は関数で返す必要がある（いろんな人の書き方を見た感じではアロー関数の形が多かった）。
- 必ず値が渡されるようになっている。

コンポーネントはプロパティに対して、上で見たように型などの要件を指定することができます。もし指定した要件が満たされない場合、 Vue はブラウザの JavaScript コンソールにて警告します。
プロパティ — Vue.js

Object型を指定したuserに"テキスト"というString型を渡すと、以下のような警告が出ます。
（ただし一応表示される）

[Vue warn]: Imvalid prop: type check failed for prop "user". Expected Object, got String with "テキスト".

また、propsに必ず値が渡される場合はrequired: trueを付けておくよう推奨されています。値がうまく渡されていない場合は警告が出ます。

Q. `this.name`と`name`って違うの？

A. `<template>`内では同じものを示します。

テンプレート内では同一として扱われます。

<template>
  <div>
    {{ this.name }}
    {{ name }}
  </div>
</template>

ただし、メソッドについては以下のような挙動になります。

<template>
  <div>
    <button @click="showDialog"> <!-- 動く -->
    <button @click="showDialog()"> <!-- 動く -->
    <button @click="this.showDialog"> <!-- 動く -->
    <button @click="this.showDialog()"> <!-- 動かない -->
  </div>
</template>

一番下の書き方だとエラーが出ます。

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'showDialog' of null"

でも、普通thisは省略します。

テンプレート内ではthis.nameではなくnameを使います。
v-onで使うメソッドはshowDialogにし、引数がある場合のみかっこを付けます。

参考：vue/this-in-template
　　　vue/v-on-function-call

A. `<script>`内では違うものを示します。

thisが付いていないものは変数として認識します。当然ですね。

export default {
  data() {
    return {
      name: "花子",
    }
  },
  methods: {
    showName() {
      const name = "太郎"
      console.log(this.name)  // "花子"
      console.log(name)   // "太郎"
    }
  }
}

おわりに

ほとんどの内容が公式ページに書かれているので、公式は神です。
ご指摘、実際にはこんな風によく書くよ、などのご意見がございましたら、コメントをいただければ幸いです。

【Vue.js】記法の違いまとめ

はじめに

Q. function()を使う書き方とそうでない書き方は何が違うの？

A. method: function()を短縮したものがmethod()です。

Q. dataの表記がいろいろあるんだけど？