Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Data binding
Search
Igor Halfeld
September 01, 2017
Programming
0
22
Data binding
Igor Halfeld
September 01, 2017
Tweet
Share
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
180
How to migrate legacy frontend?
igorhalfeld
1
120
Patterns for perfect components in Vue.js
igorhalfeld
0
110
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
52
Step by step I followed a career in software
igorhalfeld
0
700
Using AI to create memes
igorhalfeld
0
520
Deninho, the TS children
igorhalfeld
1
210
Micro Front-ends, what they don't tell you
igorhalfeld
0
380
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
90
Other Decks in Programming
See All in Programming
ボトムアップの生成AI活用を推進する社内AIエージェント開発
aku11i
0
1.3k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
品質ワークショップをやってみた
nealle
0
660
NIKKEI Tech Talk#38
cipepser
0
340
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
620
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.8k
Designing Repeatable Edits: The Architecture of . in Vim
satorunooshie
0
180
CSC509 Lecture 08
javiergs
PRO
0
270
オープンソースソフトウェアへの解像度🔬
utam0k
18
3.2k
Towards Transactional Buffering of CDC Events @ Flink Forward 2025 Barcelona Spain
hpgrahsl
0
120
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
Node-REDのノードの開発・活用事例とコミュニティとの関わり(Node-RED Con Nagoya 2025)
404background
0
110
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
630
Rails Girls Zürich Keynote
gr2m
95
14k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
4 Signs Your Business is Dying
shpigford
186
22k
Producing Creativity
orderedlist
PRO
348
40k
Bash Introduction
62gerente
615
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Why You Should Never Use an ORM
jnunemaker
PRO
60
9.6k
Automating Front-end Workflow
addyosmani
1371
200k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
940
Transcript
DATA BINDING
@Halfeld vuejs-brasil.com.br webschool.io igorluiz.me
“ Data binding is a general technique that binds data
sources from the provider and consumer together and synchronizes them. This is usually done with two data/information sources with different languages as in XML data binding.
ONE-WAY BINDING TWO-WAY BINDING
IMPLEMENTAÇÃO Dirty Checking e Dependency Tracking
DOM Watcher Watcher Watcher Dirty Checking Angular 1 State $digest
Dependency Tracking Knockout / Vue 1.x a setter getter b
Watcher a.b Collect Dependencies Bindings DOM Notify Update Notify
Virtual DOM React etc. New Virtual DOM Tree DOM Old
Virtual DOM Tree diff + patch Render Function
Virtual DOM + Dependency Tracking Vue 2.0, React + MobX
Watcher track dependencies
Object.defineProperty(obj, prop, descriptor)
DATA DESCRIPTOR ACCESSOR DESCRIPTOR
DEMO
Obrigado! é biscoito!!! http://igorluiz.me/talks/