Getting Started with Vue

Vue：2.5

Vue 是目前前端框架三巨頭之一，好處非常多，除了學習曲線相較其他兩套低之外，Laravel 這套 PHP Framework 更在 5 之後預設把 Vue 納進其中。因此在面對不同類型的專案，Vue 就顯得更為彈性。

但在開始使用 Vue 之前，必須先瞭解它的運作方法及架構，這樣才能真正知道這套 Framework 適不適合自己使用。

MVVM

Vue 的架構設計是採用 MVVM 模式。

（圖片來源：Microsoft）

MVVM 由 Model、View、ViewModel 三個部份組合而成。Model 代表的是資料層，可以在 Model 中定義資料修改和商業邏輯、View 代表網頁上的 UI 元件，它負責將資料轉換成 UI 呈現在網頁上，而 ViewModel 介於兩者之間，負責同步 View 及 Model 。

透過 ViewModel，只要 Model 或 View 有任何修改，就可以即時反應給對方，不需要任何手動操作 DOM 等等的人為干涉，就可以達到 Two-Way-Binding 的效果。

Vue Instance

一個完整使用 Vue 的應用，是一個 Vue Instance 掛上好多個 Components 所完成的。

（圖片來源：Composing with Components）

既然是 Instance，那就會有它的 Lifecycle。

（圖片來源：Lifecycle Diagram）

Virtual DOM（vNode）

在網頁上，如果任何操作都直接在 DOM 上調整，其實是非常花效能的。Virtual DOM 是以 Javascript 物件模擬 DOM 的結構去產生的樹狀結構，前端操作過程中的任何更動，都只改這份模擬物件的結構就好，最後根據 diff 再一次把修改的部份更新到真正的 DOM 上，這樣一來在大部份狀況下，效能就可以提昇許多。

而 Virtual DOM 在 Vue 實作就叫 VNode。

（圖片來源：aooy/blog）

詳細做 diff 的過程可以參考 解析 Vue 2.0的 diff 算法。

Usage

在瞭解 Vue 的架構之後，可以開始試著完成幾個實作。

在這之前必須先引入 Vue：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

Lifecycle test

const vm = new Vue({
    beforeCreate: function() {
        // Vue Instance 被 Vue Constructor 建立前
        console.log('beforeCreate');
    },
    created: function() {
        // Vue Instance 已建立
        // Data Binding 完成
        console.log('created');
    },
    beforeMount: function() {
        // Mount DOM 之前
        console.log('beforeMount');
    },
    mounted: function() {
        // DOM Mounted
        console.log('mounted');
    },
    beforeUpdate: function() {
        // 資料更新，但還沒更新 DOM
        console.log('beforeUpdate');
    },
    updated: function() {
        // DOM 更新完成
        console.log('updated');
    },
    beforeDestroy: function() {
        // 刪除 Vue Instance 之前
        console.log('beforeDestroy');
    },
    destroyed: function() {
        // 刪除 Vue Instance 之後
        console.log('destroyed');
    }
});

Two-Way-Binding（v-model）

<div id="app">
    <!-- Display -->
    {{ message }}
    <!-- Two-Way-Binding -->
    <input v-model="message">
</div>

const app = new Vue({
    // 設定 Element
    el: '#app',
    // Set Data
    data: {
        message: 'Hello Vue!'
    }
});