2018-05-01

ViewModel系フレームワークでデータの変化を監視させない

実は最近 Vue.js ばかりいじっていて、その時に

data の変更を component が全部検知してしまうとモノによってはパフォーマンスペナルティがでかいのでは?

と気になったので、ついでにメジャーなフレームワークについて「監視させない方法」を調べてみた。今回調べたのは以下の4つ。

  • Vue.js
  • Mithril
  • React
  • Angular (2+)

ちなみに React 以外をちらっと触ったことある程度なので、間違えてる可能性はおおいにあります!!1

Vue.js

Vue の場合は data あるいは data() で「ビルド時に明示されていないもの」は自動監視できない。

つまり created() などで this に対して値をセットするとそれは auto redraw の対象から外れるので変化の激しいオブジェクトなどはこのような方法で与えるとよい。

data() {
  return {}
},
created() {
  this.nowatch = NotWatchedObject
}

Mithril

Mithril にはデータの変更を自動検知して redraw する機能は存在しない。あくまで VM component はイベントハンドラ実行後に redraw を行う。つまり特定の値の変更に寄与する関数を Mithril に明示しない限り component は値の変更、変化の影響を受けない。

したがって自由に外の世界を統べる World オブジェクトなどを配置することができる。

はず。

cf. 自動再描画システム - Mithril.js

React

class ベースの React.component は state と props が監視対象であり、それ以外の property は自由に使える。

While this.props is set up by React itself and this.state has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).

State and Lifecycle - React

Angular 2+

Angular 2+ は Zone というライブラリを使って

  • ユーザーの fire したイベント
  • XHR
  • タイマー

を監視しており、この結果の component の変化は自動で検知(Change Detection)される。

NgZone#runOutsideAngular の中で実行したものは Change Detection の対象外になるらしいので、特定の property の変更に寄与するイベントをこれで囲んであげるとよさげ。

まとめ

これまであまり気にしていなかったが、実はメジャーなViewModel系のフレームワークの考え方は

  1. 特定のデータ監視系(React, Vue)
  2. イベント監視系(Mithril)
  3. 非同期処理監視系(AngularJS)

に分類できることが分かった。(あえて言うと 2 は 3 の簡略版みたいなものと言えるかもしれない。)

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm