Vue.jsでたのしかったこと【Vue.js #2 Advent Calendar 2017】20日目
はじめに
この記事は Vue.js #2 Advent Calendar 2017 20日目の記事です。
初心者なりに楽しかったことを書きます。
あなたは誰
べこと申します。コーダー兼 Web デザイナーとして地方のシステム開発会社にいます。Web デザイナーのはずなのにデザインに自信がなく（人に求められるもの・価値のあるものを作るのは難しいです）、デザインするよりコードをたくさん書きたい／むしろそっちのほうが向いているのでは？ということに気づき、今はフロントエンドエンジニアを目指しています。
勢いで SPA 作って解説本作った→たのしい
- JavaScript のライブラリは jQuery しか使ったことがない
- フロントエンド周りは初心者
- 調べつつ作りつつ、わかったことを本にまとめた
- つくったサイトをきっかけに HTML 側を Pug で書けるようになった
- （終了タグのこと考えなくて済むのめっちゃ楽※話ずれてる
- できることが増えた→楽しい
- リポジトリ
- 作ったサイト
- 技術書典3で頒布した本
最近わかったことが増えた→たのしい
computedと methods の違い
分かる人はわかっているかと思いますが、公式サイトの内容を元に実際に自分で試してみて理解が深まりました。
公式サイトの 算出プロパティ vs メソッド に書かれている以下のこと、
Date.now() はリアクティブな依存ではないため、次の算出プロパティは二度と更新されないことを意味します:
computed: {
now: function () {
return Date.now()
}
}
対称的に、メソッド呼び出しは、再描画が起きると常に関数を実行します。
がよくわからず……。実際に作ってみました。
スクショ
Date.now() を返す関数を computed 、methods の順にそれぞれ2回ずつ試したところです。
- 赤い文字を入れたほうが computed
- 青い文字を入れたほうが methods
です。
公式の説明そのままですが、computed のほうは値が変わらず、methods のほうは値が変わってくれました。なるほど！
元のページ
JS を触ってみたいと思うきっかけになった→たのしい
JS でもっと複雑なことができるようになりたいですね。Vue.js でだけでなく他のライブラリも使ってみたい！と思えるくらいには自信がつきましたw 本当に楽しい。いろいろ作ってみたいです。
以上です！
Vue.js #2 Advent Calendar 2017
明日は yamanoku さんです。
