質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5756閲覧

Vue Routerのwatch内でのメソッド呼び出しについて

fightTT

総合スコア27

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/07/26 04:56

Vue Routerの公式サイトにある以下のサンプルコードの記述について質問させてください。

Javascript

1export default { 2 data () { 3 return { 4 loading: false, 5 post: null, 6 error: null 7 } 8 }, 9 created () { 10 // view が作られた時にデータを取得し、 11 // そのデータは既に監視されています 12 this.fetchData() 13 }, 14 watch: { 15 // ルートが変更されたらこのメソッドを再び呼び出します 16 '$route': 'fetchData' 17 }, 18 methods: { 19 fetchData () { 20 //省略 21 } 22 } 23}
  1. watchによる$routeの検出で、fetchData()を呼び出す際に、created内での呼び出しのようにthis.fetchData()ではなく、'fetchData'とメソッド名で呼び出している(呼び出せる)理由を教えてください。
  2. 同様に$route'で括って文字列にしていますが、こちらの理由も教えていただけたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  1. watchによる$routeの検出で、fetchData()を呼び出す際に、created内での呼び出しのようにthis.fetchData()ではなく、'fetchData'とメソッド名で呼び出している(呼び出せる)理由を教えてください。

watchのドキュメントを読むと、

Vue インスタンスはインスタンス化の際にオブジェクトの各エントリに対して $watch() を呼びます。

と書いてあります。
$watchのドキュメントです。
今回の例でいうと、vm.$watch( expOrFn, callback, [options] )の第1引数が$route、第2引数が'fetchData'となるようです。

下記のようにfetchData()と書いた場合、fetchDataを実行した結果を渡します。

js

1watch: { 2 '$route': fetchData() 3}

'fetchData'と書くことで、関数を渡すことができます。その関数を$watchの中でコールバック関数として呼び出している形です。

  1. 同様に$routeも'で括って文字列にしていますが、こちらの理由も教えていただけたら幸いです。

jsのObjectのキーはクォーテーションで括わなくても文字列として判断してくれます。
そのため、$route'で括っても括わなくてもどちらでも動きます。
試しに以下のようなウォッチャを定義しても動くはずです。

js

1watch: { 2 $route: 'fetchData', 3 'loading': 'fetchData' 4}

なぜ'で括っているのかは記述を見つけられなかったです。

因みにwatchの型です。

{ [key: string]: string | Function | Object | Array}

https://jp.vuejs.org/v2/api/#watch

投稿2019/07/26 06:18

編集2019/07/26 06:22
KaiShoya

総合スコア551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fightTT

2019/07/26 06:30

ご回答ありがとうございます! 詳細な説明で、完全に理解できました。 Vueの記述云々ではなくJSの理解が足りておりませんでした。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問