133
105

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-30

はじめに

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

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)   // "太郎"
    }
  }
}

おわりに

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

133
105
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
133
105

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?