Getting Started with Vue

Vue:2.5

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

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

MVVM

Vue 的架構設計是採用 MVVM 模式。
MVVM
(圖片來源:Microsoft

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

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

Vue Instance

一個完整使用 Vue 的應用,是一個 Vue Instance 掛上好多個 Components 所完成的。
Vue Components
(圖片來源:Composing with Components

既然是 Instance,那就會有它的 Lifecycle
Vue Instance Lifecycle
(圖片來源:Lifecycle Diagram

Virtual DOM(vNode)

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

Virtual DOMVue 實作就叫 VNode

Virtual DOM Diff
(圖片來源: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!'
    }
});
Categories: Vue