This page looks best with JavaScript enabled

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

 ·   ·  ☕ 4 分で読めます
✏️

はじめに

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-forin, 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&hellip;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.namenameって違うの?

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); // "太郎"
    },
  },
};
Share on

END
END
@aiandrox

目次