Vue.js: History (Cont.)

Ref: Vue.js Recent Trends by kazupon

First Look (Cont.)

First Look (Cont.)

Vue.js: Setup (Cont.)

• webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

• webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

• browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

• browserify-simple - A simple Browserify + vueify setup for quick prototyping.

• simple - The simplest possible Vue setup in a single HTML file

Declarative & Reactive Rendering

Ref: Vue.js @ Laracon

Vue.js: Overview (Cont.)

Vue.js: Overview (Cont.)

Declarative & Reactive Rendering

Ref: Vue.js @ Laracon

Component Oriented Architecture

Vue.js: Overview (Cont.)

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Ref: Vue.js @ Laracon

Vue.js: Lifecycle

new Vue({
  init, // Vue instance 被初始化後立刻執行,
        // 在資料綁定還有 event/watcher 啟動前
  created, // Vue instance 被創造後執行。此時，
           // instance 已經將 options 處理過，
           // 意思是以下的動作都已經被執行/啟動了:
           // data observation,
           // computed properties,
           // methods,
           // watch/event callbacks。
           // 但是, DOM 尚未被編譯, 還有還無法取得 $el 屬性。
  beforeCompile, // 在編譯 DOM 前執行
  compiled, // 在 DOM 編譯完後執行。 此時，
            // 所有的 directives 已經綁定完成了，
            // 所以此時若資料變動時會觸發 DOM 更新。
            // 然而, 不保證 $el 已經被加入 document 了。
  attached, // 在 vm.$el 被附加到 DOM 或是
            // 透過 VM instance 的方法 (例如: $appendTo()) 後執行。
            // 直接操作 vm.$el 不會觸發這個 hook。
  ready, // 在 DOM 編譯完成後執行，
         // 此時 $el 已經被第一次加入 document。
         // 也就是說，在第一次 attached hook 被執行後立刻執行 ready hook。
         // 注意：在這邊的 insertion 必須藉由 Vue 來觸發 ready hook
         // (透過 vm.$appendTo() 之類的方式或是更新 directive)。
})

Ref: Vue.js Lifecycle hooks

Vue.js: Lifecycle

new Vue({
  detached, // 在 vm.$el 從 DOM 中移除或是
            // 透過 VM instance 的方法 (例如: $remove()) 後執行。
            // 直接操作 vm.$el 不會觸發這個 hook。
  beforeDestroy, // Vue instance 被銷毀前執行。
                 // 此時 Vue instance 的功能都還能用
  destroyed, // Vue instance 已經被銷毀後執行。
             // 當這個 hook 被呼叫時，所有的綁定、 directives
             // 對於 Vue instance 的綁定、還有子 Vue instance 的綁定都已經被註銷。
             // 注意：如果有 leaving transition 動畫的話，
             // destroyed hook 會在 transition 結束後才執行。
})

Ref: Vue.js Lifecycle hooks

Comparison to Other Frameworks (Cont.)

Angular 1.x

Ref: AngularJS Integration with the browser event loop

Comparison to Other Frameworks (Cont.)

Angular 2

Ref: ANGULAR 2 CHANGE DETECTION EXPLAINED

Comparison to Other Frameworks (Cont.)

React

Ref: React LifeCycle SVG

Comparison b/w 1.x & 2.0

Actual DOM v.s.  Virtual DOM

Ref: Vue.js @ Laracon

Comparison b/w 1.x & 2.0

Actual DOM v.s.  Virtual DOM

Ref: Vue.js @ Laracon

Comparison b/w 1.x & 2.0

Actual DOM v.s.  Virtual DOM

Ref: Vue.js @ Laracon