Vueと共通

【Nuxt.js】Nuxt文法編:watch

前置き

データの変更の監視ができる
監視プロパティのwatch💥👀

算出プロパティとの比較を中心に
解説していきます🍓🙋‍♀️

公式: https://jp.vuejs.org/v2/guide/computed.html


算出プロパティ VS 監視プロパティ

inputに入力したデータの変更を検知して
表示もそれに応じて変えてます💫
でもこの場合なら
computed使った方が早くない?🤷‍♀️
とVue公式も言っています。

じゃあwatchいつ使うんだ!😡
というのは後述するので
まずは違いを見てみましょう👀⚡️

watch
入力するinputの値を
全てを監視するので
とっても面倒ですね、
ほぼ同じことを書きます✍️💦

⭕️ computed
fullNameの1つにまとまるので
スッキリします✨

⬇️computedの解説記事はこちら


監視プロパティwatch


算出プロパティcomputed


watchにしかできないこと

多くの場合は算出プロパティが適切だけど
watchにしかできないこともあります🌟
APIを使ったり、処理の実行頻度を制限したり。

この場合では、watch オプションを利用することで、非同期処理(API のアクセス)の実行や、処理をどのくらいの頻度で実行するかを制御したり、最終的な answer が取得できるまでは中間の状態にしておく、といったことが可能になっています。これらはいずれも算出プロパティでは実現できません。

https://jp.vuejs.org/v2/guide/computed.html


解説

watch

watchの使い方はこちら。
オプションも使えますが、
今回は使わないので
最低限の基礎構文のみ
記載しています✍️

inputの値を監視し、
値が変わっている間のテキストを表示させ、
debouncedGetAnswer()を呼び出します。

公式: https://jp.vuejs.org/v2/api/#vm-watch
参考: https://www.e-loop.jp/knowledges/2/

created()

解説記事をご覧ください❤️👀

_.debounce(function, wait, [immediate])

イベント発火後、
指定秒数で同じイベントを発火させずに留める。
この場合は質問が入力されてから0.5秒後に実行。
最大で0.5秒に1回しか実行されません。

参考:
http://underscorejs.org/#debounce
https://qiita.com/akifo/items/4d715929934a458fb189

indexOf(string)

指定されたStringが
最初に現れたインデックスを返します。
値がなければ-1を返します。
今回は?を指定しているので
質問に?がなく-1を返す場合は
?を入れてね」と言われます🧸

?がある場合は
Thinking...が表示されます。

参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

axios

yesnoAPIを使うのでaxios🌟
1万回に1回maybeが
返されることもあるみたいです😄

yesnoAPI: https://yesno.wtf/#

⬇️axiosの解説記事はこちら

_.capitalize(string)

指定された文字の
先頭のみ大文字、
あとは小文字にします。

https://yesno.wtf/apiを見ると
yesかnoが表示されるので
先頭を大文字にするために
使用していますね💡


コード

lodashはグローバルなモジュールで
importの必要はないとあるけど
importしないとエラーに
なってしまいました。。。
参考: https://ja.nuxtjs.org/faq/webpack-plugins/

Error

ReferenceError: _ is not defined

でもimportすれば良いだけなので…!
これでしっかり動きます🌟🤗


まとめ

基本的には算出プロパティを使い、
ダメならwatch❗️👀
非同期通信など
少し複雑な処理が必要なら❗️watch👀
というように
実装したい内容に合わせて
使い分けましょう🎶🎷

-Vueと共通
-,

© 2020 aLiz Nuxt