Vue

[Holayn]

My take on its selling points:

• very easy to learn (very similar to plain html, css, js) with powerful functionality built in, no weird template syntax (i.e. JSX) or many new ones
• makes code clean and legible (esp. compared to vanilla) - structured components, specific places for certain types of logic
• speeds up development. productivity++
• very performant (better than react)
• efficient reactivity system (data binding between dom and data) - only data that is updated is re-rendered
• very easy to componentize (especially with single file components), scale
• great libraries like vuex, vue-router, dedicated dev tools
• can be progressively adopted (starting with script tag and working way up to full built app), is also a small framework
• great documentation and community

[Holayn]

Internals

Good read: link

Vue app consists of components, where each has:

Compilation Phase

Creating a render function that creates a VNode, which is used by Virtual DOM patch process to create actual DOM elements. Note: if using build step, this is done there (i.e. using single file components)

• Parse template (to form AST) -> optimization (figure out what subtrees are static / never will change, so that it can be skipped in the patch process) -> codegen (render functions created to be used in patch process)'

Observers/Watchers

• Observers - Vue creates them on all data defined. When data changes (i.e. set), notifies Watchers
• Watchers - Basically initiates patch process. Observes those data changes, watchers are added to queue, nextTick consumes and flushes all watchers in queue, then the render process is initiated.

Patch process

• Virtual DOM is way of representing actual DOM. Just a JS object
• Process efficiently creates new DOM elements and replaces them in the DOM by comparing old and new VNodes

Lifecycle hooks

• created() - data and watchers are set up. no virtual dom yet
• beforeMounted() - before patch process, VNodes being created based on data/watchers
• mounted() - after patch process
• beforeUpdate() - watcher updates VNode, fires patch process if data change
• updated() - patch process done
• destroyed() - watchers removed