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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Igor Halfeld
September 01, 2017
Programming
27
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Data binding
Igor Halfeld
September 01, 2017
More Decks by Igor Halfeld
See All by Igor Halfeld
Modular monoliths with fastify
igorhalfeld
0
210
How to migrate legacy frontend?
igorhalfeld
1
140
Patterns for perfect components in Vue.js
igorhalfeld
0
130
Clean Architecture no Front-end (update 2021-05-11)
igorhalfeld
0
74
Step by step I followed a career in software
igorhalfeld
0
710
Using AI to create memes
igorhalfeld
0
540
Deninho, the TS children
igorhalfeld
1
230
Micro Front-ends, what they don't tell you
igorhalfeld
0
410
CSS in JavaScripto, the anti-pattern that is good
igorhalfeld
1
110
Other Decks in Programming
See All in Programming
引き算の組織 ― アウトカムとAIに全振りするために辞めたこと ― / Organization by Subtraction
hirokiyamamoto14
PRO
0
290
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
1
1.9k
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
yasei_no_otoko
0
120
為什麼你並不需要ViewModel / No, you don't need a ViewModel
lovee
1
510
AI Engineeringは、AIプロダクトだけのものか? 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
5
520
不幸な GC
chencmd
0
710
Cloudflare is Agents
chimame
0
180
Dockerfile CMD for Node.js
grazie1999
0
120
リアルな遅延を測る仕様
kota_yata
1
120
異なる設計思想のフレームワークを経験して得た学び
amekuhideki
1
370
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
150
AWS Transform Customによる Spring Boot 2.xから4.xへのVerUp
satoshi256kbyte
2
100
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Odyssey Design
rkendrick25
PRO
2
770
The Curious Case for Waylosing
cassininazir
1
480
We Have a Design System, Now What?
morganepeng
55
8.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
A better future with KSS
kneath
240
18k
Done Done
chrislema
186
16k
Designing for Performance
lara
611
70k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Utilizing Notion as your number one productivity tool
mfonobong
4
550
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.8k
WENDY [Excerpt]
tessaabrams
11
39k
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/