Beruflich Dokumente
Kultur Dokumente
js
Make Frontend Development Great Again!
2. Component Oriented
Architecture
Declarative & Reactive
Rendering
DOM ???
State
DOM
User Input
View
State
Render
Template JavaScript
State
Vue instance
Event Listeners
View
State
Directives (1.x)
Virtual DOM (2.0)
User Input
View
State
Render
Derived
State
Computed
Properties
How does it work, really?
Observe POJO mutations with
ES5 Object.defineProperty
Object
Property
Register
Dependency getter
Trigger setter
Change
a
Collect b
Dependencies
getter
Update
Notify
DOM
{{a.b}}
Component Oriented
Most App UIs can be broken
down into components
Nav
Content Sidebar
Side
Item
Item
Every component is responsible for
managing a piece of DOM
Nav
Content Sidebar
Item
The entire UI can be abstracted
into a tree of components
Registering a global component
Vue.component('my-component', {
props: ['msg'],
template: '<p>{{msg}}</p>'
})
Using the component
<my-component msg="Hello!">
</my-component>
<p>{{msg}}</p>
<p>Hello!</p>
Data-passing with props
<my-component :msg="msgFromParent"></my-component>
msgFromParent
parent
One-way binding
msg
my-component
2.0: Virtual DOM
Virtual DOM Tree
div
h1 p p
create Actual
DOM
Tree
Virtual DOM update
Old Virtual DOM Tree
render
Render
Function
Template Compilation
compile
Template Render
Function
Template Compilation
render (createElement) {
return createElement(
<div id="demo">
'div',
<h1>{{msg}}</h1>
{ attrs: { id: 'demo' }},
</div>
[createElement('h1', this.msg)]
)
}
The full picture: initial render
track
dependencies
render
Actual
create
DOM
Tree
The full picture: updates
Trigger
Render re-render
Watcher
Function
track
dependencies
render