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

はじめに

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


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`の表記がいろいろあるんだけど？

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


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`って使い分けとかあるの？

1
2
3


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

A. ないです。

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

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

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

1
2
3


for (variable of iterable) {
  statement;
}

引用：for…of - JavaScript | MDN

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


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>`内では同じものを示します。

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

1
2
3
4
5
6


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

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

1
2
3
4
5
6
7
8


<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が付いていないものは変数として認識します。当然ですね。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


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