cidermitainaスマートフォン用の表示で見るcidermitainaフロントエンドエンジニアをやっています。頑張るから読んでほしい。(算出プロパティ1)お仕事でVue.jsを書くことが多いのですが、なんとなく中身どうなってるんだろうって思ったので中身を読んでみることにしました。(今年はコードリーディングが目標.です..!)Vue.jsのコード全て読もうとすると挫折しちゃいそうなので、面白そうなところ、読めそうなところつまみ食いしてみることにしました。今回は算出プロパティのコードを読んで見ました。算出プロパティのコードを読む算出プロパティとは任意に処理を含めることのできるデータテンプレート内にjavascriptが使用できるが、テンプレート内に多くのロジックを詰め込むと、コードが肥大化、メンテナンスが難しくなる。}↑上記コードで同じ結果になる。違いは?算出プロパティは依存関係にもとづきキャッシュされる算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。messageが変わらない限り、reversedMessageが呼び出されてもfunction()以下の処理は実行されず、前に算出したプロパティの値がそのまま出力される。messageの値が変われば再び処理が走るが、そうでなければ何回呼び出されても計算が発生しないので、不要に処理が遅くなることがない。}Date.now()は二度と更新されない。いつアクセスしても同じ日時methodsはメソッドなので、入力値が変わらなくても、呼び出されるたびに毎回処理が走る。算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。算出プロパティ付近のコード読んでみるどうやって実装してるんだろう?予想を立ててみたdataの値が更新されたら再評価されるなんかObserverっぽい気がする。Vueの本にメソッドを呼び出しているわけではないのに何かの処理をしている。これがVue.jsの心臓ともいえるリアクティブシステムです。Vue.jsやってみたことvueのコード読んでみる。GitHub↓defineReactive関数見つけた。getter/setterある!↓Object.defineProperty?あるオブジェクトのプロパティを明示的に追加または変更することができます。(算出プロパティ1)Tweet広告を非表示にする関連記事2019-03-03ブラウザのレンダリングの仕組み「ブラウザを立ち上げてアドレスバーにURLを打ち込んでEnter押...2019-01-26Vue.jsのリアクティブシステムみたいなのを作ってみた。Hyperappについて調べてみた。(1)はてなブログをはじめよう!cidermitainaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。