Vue.

js
Make Frontend Development Great Again!

vuejs.org @vuejs vuejs/vue

Vue.js
Started in late 2013
First release Feb. 2014
Apr. 2015: this happened
Apr. 2015: this happened
Today

~25,147 stars on GitHub

~150k downloads/month (NPM only)
$8,000+ monthly support from the
community
Big Thanks to the Laravel
Community for making it
possible.
Core Concepts
1. Declarative & Reactive
Rendering

2. Component Oriented
Architecture
Declarative & Reactive
Rendering
DOM ???
State
 DOM

Problems with the DOM

Re-rendering entire chunks of DOM is expensive and disruptive

Imperatively keeping the DOM in sync with the state is tedious
and error-prone
Declarative & Reactive Rendering

User Input

View
State
Render

View is just a declarative State should be the single

mapping from the state source of truth
 HTML JavaScript

<div id="demo"> var vm = new Vue({

<h1>{{msg}}</h1> el: '#demo',
</div> data: {
msg: 'Hello Vue.js!'
}
})
 Vue instance

Template JavaScript

<div id="demo"> var vm = new Vue({

<h1>{{msg}}</h1> el: '#demo', DOM Mounting
</div> data: { point
msg: 'Hello Vue.js!'
}
Dynamic Bindings })

State
 Vue instance

Event Listeners
View
State
Directives (1.x)
Virtual DOM (2.0)

DOM Plain JavaScript

Objects
Vue
Todo List Demo
(what else can we build?)
 Derived State
with Computed Properties

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

Directive (1.x) Watcher setter

Virtual DOM (2.0) a.b
Notify

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>

my-components template will be

inserted into the container element

<p>{{msg}}</p>

`msg` will be passed in as data

state.

<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

span span span a span

 Virtual DOM initial render
Virtual DOM Tree

create Actual
DOM
Tree
 Virtual DOM update
Old Virtual DOM Tree

diff + patch Actual

DOM
Tree
New Virtual DOM Tree
 Render functions:
Functions that return
Virtual DOM trees

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

Template compile Render

Watcher
Function

track
dependencies
render

Virtual DOM Tree

Actual
create
DOM
Tree
 The full picture: updates
Trigger
Render re-render
Watcher
Function

track
dependencies
render

New Virtual DOM Tree

diff + patch Actual

DOM
Tree

Old Virtual DOM Tree

2.0: Transition System
(demo)
 Thanks

vuejs.org @youyuxi @yyx990803