Vue.js組件化開發實踐

時間 2019-11-10

標籤 vue.js vue 組件開發實踐欄目 JavaScript 简体版

原文原文鏈接

前言css

公司目前製做一個H5活動，特別是有必定統一結構的活動，都要碼一個重複的輪子。後來接到一個基於模板的活動設計系統的需求，便有了一下的內容。首先會對使用Vue進行開發的一些前期須要的技術儲備進行簡單介紹。html

組件化前端

需求一到，接就是怎麼實現，技術選型天然成爲了第一個問題。鑑於目前web前端mvvm框架以及組件化開發方式的流行，決定技術棧採用：vue + vuex + es6 + browserify。vue

這裏首先簡單說下web前端組件化開發方式的歷程：html5

最先的組件化結構，代碼結構可能以下：react

- lib/components/calendar
  |- calendar.css |- calendar.js |- calendar.html

將同功能的組件文件放到同一目錄下，結構清晰、職責明確，視圖、樣式、腳本的關係顯著，也易於單元測試，是獨立展現和交互的最小單元。webpack

後來：git

在以前基礎上對組件進行了生命週期的加工(初始化、獲取資源、渲染、更新、銷燬等)，理順了組件的各個階段，有助於對組件實現(從初始化到銷燬)的理解。而且藉助於組件各個階段的鉤子能夠對組件有更好的利用和擴展。對外暴露接口，數據綁定或者說數據倉庫的加入，各類xMD模塊加載器的出現，也讓這種這種開發方式上升了一個層級。ExtJs、YUI等都是這方面的專家。es6

再後來：github

有了以前發展，進步是很大的，但依然不夠。組件的可複用性(基礎樣式，基礎邏輯，基礎屬性、可複用的穩定業務邏輯等)、組件間通訊、全局狀態管理、甚至是可否有更好的代碼組織方式等依然是問題。Angular、React、Polymer、Vue等mvvm框架和webpack、browserify等構建、預編譯工具的出現正試圖解決這些問題。

ES6

在正式開始vue以前，由於本項目用到了es6，也是時候在項目接住babel開始使用es6了，那麼這裏就先談談你們都關注的EcmaScript6。多餘的就不說了，es6經歷了多年的苦，終於在2015年下半年定稿，正式名稱：EcmaScript2015。每一個剛開始接觸es6的人應該都有這麼一個問題，es6的出現究竟是爲了什麼，或者說它解決了什麼。老版本es4/5雖然坑多，就像Brendan Eich評價js同樣："優秀之處並不是原創，原創之處並不優秀"。但咱們不也是去其槽粕，留其精髓，一路填坑走過了嗎？

來直接一點，es6經常使用的特性有：class類的支持、箭頭函數、對象和數組的解構、默認參數、不定參數、對象合併、let與const關鍵字、for of迭代、字符串模板、對象字面量加強、同名對象字面量縮寫、模塊化import/export、map、promise、* yeild生成器等。

這裏挑出幾個經常使用的簡單說下：

首先class:

在沒有class的時候，建立類的一種比較標準的方式是將非函數的屬性放到構造函數裏，函數屬性在原型鏈裏添加。類的繼承的實現就更爲多樣：對象冒充、call/apply方式、原型鏈方式等。es6的class和extends關鍵字的出現給出了一個統一的規範：

class People {
    constructor (name, age, gender){
        this.name = name
    }
    sayName (){
        return this.name
    }
}
  
class Student extends People {
    constructor (name, age, gender, skill){
        super(name, age, gender)
        this.skill = skill
    }
    saySkill (){
        return this.skill
    }
}

let tom = new Student('tom', 16, 'male', 'computer')

tom.sayName()  // => 'tom'
tom.saySkill()  // => 'computer'

tom.__proto__ === Student.prototype // => true
Student.__proto__ === People // => true
tom instanceof People // => true
tom instanceof Student // => true

Student.prototype.__proto__ === People.prototype // => true  ES5裏也能夠經過這種方式來實現繼承，這裏結果的相等代表了class底層依然是經過原型鏈實現的繼承，說明了ES6和ES5在語言特色上並無本質上的變化
People.__proto__ === Function.prototype // => true
People.prototype.__proto__ === Object.prototype // => true  對於任何對象，這個等式都是成立的

// 這裏順帶提一下：
Function.prototype.__proto__ === Object.prototype // => true
Object.prototype.__proto__ // => null 原型鏈找到此處就終止了。當咱們判斷一個對象是否是某個類的實例，一層一層網上找，當__proto__爲null，還未找到和類的構造函數protorype相等時，就不是實例，可參考instanceof的實現
Object.__proto__ === Function.prototype // => true Object是構造函數(但函數也是對象，能夠擁有__proto__屬性)，同時Object爲Function的一個實例，Function的特殊性
Function.__proto__ === Function.prototype // => true 這說明Function(對象)自己也是Function(構造函數)的一個實例，至關於 var Function = new Function(); 相似於現有蛋後有雞的問題... 只有Function是這樣的，Function特殊性的體現

// 以上明白了，你也就弄懂JavaScript的原型鏈了

能夠看出雖然是新的規範，可是仍是遵照js的原則：對象的__proto__指向它的構造函數(類)的prototype。es6對象字面量的__proto__注入也能快速的實現繼承。 class 也只是提供了一個語法糖，並無改變語言的本質。

在純Vue組件中，咱們不會本身寫class，由於Vue是高度封裝的，咱們只須要給底層的class傳入咱們的配置對象便可，但瞭解es6的class也是有必要的。Vue的這點相對react來講，是一個顯著不一樣的地方。

接下來是let：

es6以前js只有函數做用域，let的出現有了塊級做用域，也就算是if、else、for這類也有了做用域，塊內用let聲明的變量外面是訪問不到的，在js預解析的時候，是不會被提高到當前函數做用域的前面的。基於該特性，在for迭代的時候，每次迭代都會產生一個塊級做用域的獨立的迭代變量，讓最後的結果就是咱們期待的結果。

var arr = [];
for (let i = 0; i < 10; i ++){
    arr[i] = function (){
        return i
    }
}

arr[6]()  // => 6

//若是用var聲明i，不管多少次迭代，外層的i始終被每次迭代的函數內部引用着(閉包)，不會被當作垃圾回收，最後的結果都指向同一個i，值爲10。
//以往爲了不這個問題，一般會這麼作：

for (var i = 0; i < 10; i ++){
    arr[i] = (function (i){
        return function (){
            return i
        }
    })(i)
}

最後講講箭頭函數：

es6以前的function有一個特色：函數內部的上下文並非由該函數寫在那裏決定的，而是由誰調用決定的，誰調用函數內部的this就指向誰。而後咱們有些時候並不想讓他這樣，但又沒辦法，只能經過先保存this，或者call/apply，或者bind來調整上下文。箭頭函數的出現解決了這個寧人苦惱的問題，由於箭頭函數內的上下文(this)是由函數寫在哪決定的，即其自己沒有綁定this，而是由其直接外層函數、方法的this來決定的，也沒法經過bind來調整上下文。

// 在window上下文中

var obj = {
    test1 : function (){
        window.setTimeout(function (){
            console.info(this)
        }, 100)
    },
    test2 : function (){
        window.setTimeout(() => {
            console.info(this)
        }, 100)
    },
    test3: () => console.info(this),
    test4: function (){
        console.info(this)
    },
    test5 (){ // 對象加強寫法
    　　console.info(this);
    }
}

obj.test1() // => Window {}
obj.test2() // => obj {}
obj.test3() // => Window {}
obj.test4() // => obj {}
obj.test5() // => obj {}

箭頭函數this鎖定特性值得細細品味，在目前的Vue或者React應用中有妙用。

用普通函數仍是箭頭函數並不是絕對，箭頭函數也不能徹底替代普通函數，要用哪一個由具體邏輯決定，前提是要先了解他們的區別。

箭頭函數還有一個特色就是可以簡化return的書寫。

var a = function (n){
    return n
}

var b = (n) => n //能夠省略return和花括號

var c = n => n //若是隻有一個參數，中括號也能夠省略

a(1)  // => 1
b(1)  // => 1
c(1)  // => 1

從這幾個簡單的例子能夠看出，es6不只僅是新增了幾顆糖，對以前js的一些不友好的地方的改善才是重點。

Vue

進入正題，

Vue.js（讀音 /vjuː/, 相似於 view）是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue.js 自身不是一個全能框架——它只聚焦於視圖層。所以它很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，在與相關工具和支持庫一塊兒使用時，Vue.js 也能完美地驅動複雜的單頁應用。

— 文中關於vue的大部份內容引用自vue的官方文檔，感謝做者的工做！

響應的數據綁定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

new Vue({
    el : '#app',
    data : {
        message : 'Hello Vue.js!'
    }
})

結果：改變輸入框的值，<p>標籤的文本也會對應改變。

基本工做原理：<input>輸入框的值與vue實例的message屬性進行了綁定，<p>標籤的文本也與message屬性進行了綁定。輸入框值的變化會改變message的值，message值的變化會反應到<p>標籤的文本上。

Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步很是簡單。在使用 jQuery 手工操做 DOM 時，咱們的代碼經常是命令式的、重複的與易錯的。Vue.js 擁抱數據驅動的視圖概念。通俗地講，它意味着咱們在普通 HTML 模板中使用特殊的語法將 DOM 「綁定」到底層數據。一旦建立了綁定，DOM 將與數據保持同步。每當修改了數據，DOM 便相應地更新。這樣咱們應用中的邏輯就幾乎都是直接修改數據了，沒必要與 DOM 更新攪在一塊兒。這讓咱們的代碼更容易撰寫、理解與維護。

組件系統：

組件系統是 Vue.js 另外一個重要概念，由於它提供了一種抽象，讓咱們能夠用獨立可複用的小組件來構建大型應用。若是咱們考慮到這點，幾乎任意類型的應用的界面均可以抽象爲一個組件樹：

實際上，一個典型的用 Vue.js 構建的大型應用將造成一個組件樹。

你可能已經注意到 Vue.js 組件很是相似於自定義元素——它是 Web 組件規範的一部分。實際上 Vue.js 的組件語法參考了該規範。例如 Vue 組件實現了 Slot API 與 is 特性。可是，有幾個關鍵的不一樣：

Web 組件規範仍然遠未完成，而且沒有瀏覽器實現。相比之下，Vue.js 組件不須要任何補丁，而且在全部支持的瀏覽器（IE9 及更高版本）之下表現一致。必要時，Vue.js 組件也能夠放在原生自定義元素以內。

Vue.js 組件提供了原生自定義元素所不具有的一些重要功能，好比組件間的數據流，自定義事件系統，以及動態的、帶特效的組件替換。

組件系統是用 Vue.js 構建大型應用的基礎。另外，Vue.js 生態系統也提供了高級工具與多種支持庫，它們和 Vue.js 一塊兒構成了一個更加「框架」性的系統。

這裏簡單介紹下vue最經常使用也較重要的兩塊：響應式原理和組件系統。

響應式原理：

Vue.js的數據觀測實現原理和Angular有着本質的不一樣。瞭解Angular的讀者可能知道，Angular的數據觀測採用的是髒檢查（dirty checking）機制。每個指令都會有一個對應的用來觀測數據的對象，叫作watcher；一個做用域中會有不少個watcher。每當界面須要更新時，Angular會遍歷當前做用域裏的全部watcher，對它們一一求值，而後和以前保存的舊值進行比較。若是求值的結果變化了，就觸發對應的更新，這個過程叫作digest cycle。

髒檢查有兩個問題：

1.任何數據變更都意味着當前做用域的每個watcher須要被從新求值，所以當watcher的數量龐大時，應用的性能就不可避免地受到影響，而且很難優化。
2.當數據變更時，框架並不能主動偵測到變化的發生，須要手動觸發digest cycle才能觸發相應的DOM 更新。Angular經過在DOM事件處理函數中自動觸發digest cycle部分規避了這個問題，但仍是有不少狀況須要用戶手動進行觸發。

Vue.js採用的則是基於依賴收集的觀測機制。從原理上來講，和老牌MVVM框架Knockout是同樣的。依賴收集的基本原理是：

1.將原生的數據改形成「可觀察對象」。一個可觀察對象能夠被取值，也能夠被賦值。
2.在watcher的求值過程當中，每個被取值的可觀察對象都會將當前的watcher註冊爲本身的一個訂閱者，併成爲當前watcher的一個依賴。
3.當一個被依賴的可觀察對象被賦值時，它會通知全部訂閱本身的watcher從新求值，並觸發相應的更新。
4.依賴收集的優勢在於能夠精確、主動地追蹤數據的變化，不存在上述提到的髒檢查的兩個問題。但傳統的依賴收集實現，好比Knockout，一般須要包裹原生數據來製造可觀察對象，在取值和賦值時須要採用函數調用的形式，在進行數據操做時寫法繁瑣，不夠直觀；同時，對複雜嵌套結構的對象支持也不理想。

Vue.js利用了ES5的Object.defineProperty方法，直接將原生數據對象的屬性改造爲getter和setter(這是ES5的特性，須要js解釋引擎的支持，沒法經過各類打shim補丁來實現，至少如今的babel pollyfill和各類shim是無法的。這也是爲何Vue不支持IE8及如下版本的緣由，由於IE8的defineProperty只支持DOM對象，純Object會報錯。)，在這兩個函數內部實現依賴的收集和觸發，並且完美支持嵌套的對象結構。對於數組，則經過包裹數組的可變方法（好比push）來監聽數組的變化。這使得操做Vue.js的數據和操做原生對象幾乎沒有差異[注:在添加/刪除屬性，或是修改數組特定位置元素時，須要調用特定的函數，如obj.$add(key, value)才能觸發更新。這是受ES5的語言特性所限。在操做對象類型數據的時候必定要注意這點，不然沒法實現響應。

變化檢測：

受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。由於 Vue.js 在初始化實例時將屬性轉爲 getter/setter，因此屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。例如：

var data = {a : 1}
var vm = new Vue({
    data : data
})
//vm.a 和 data.a 如今是響應的

vm.b = 2
//vm.b 不是響應的

data.b = 2
//data.b 不是響應的

不過，有辦法在實例建立以後添加屬性而且讓它是響應的。

對於 Vue 實例，可使用 $set(key, value) 實例方法：

vm.$set('b', 2)
//vm.b 和 data.b 如今是響應的

對於普通數據對象，可使用全局方法 Vue.set(object, key, value)：

Vue.set(data, 'c', 3)
//vm.c 和 data.c 如今是響應的

有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 添加屬性。可是，添加到對象上的新屬性不會觸發更新。這時能夠建立一個新的對象，包含原對象的屬性和新的屬性：

// 不使用 Object.assign(this.someObject, {a : 1,b : 2})
this.someObject = Object.assign({}, this.someObject, {a : 1, b : 2})

計算屬性的奧祕：

你應該注意到 Vue.js 的計算屬性不是簡單的 getter。計算屬性持續追蹤它的響應依賴。在計算一個計算屬性時，Vue.js 更新它的依賴列表並緩存結果，只有當其中一個依賴發生了變化，緩存的結果才無效。所以，只要依賴不發生變化，訪問計算屬性會直接返回緩存的結果，而不是調用 getter。

爲何要緩存呢？假設咱們有一個高耗計算屬性 A，它要遍歷一個巨型數組並作大量的計算。而後，可能有其它的計算屬性依賴 A。若是沒有緩存，咱們將調用 A 的 getter 許屢次，超過必要次數。

因爲計算屬性被緩存了，在訪問它時 getter 不老是被調用。考慮下例：

var vm = new Vue({
    data : {
        msg : 'hi'
    },
    computed : {
        example : function (){
            return Date.now() + this.msg
        }
    }
})

計算屬性 example 只有一個依賴： vm.msg 。 Date.now() 不是響應依賴，由於它跟 Vue 的數據觀察系統無關。於是，在訪問 vm.example 時將發現時間戳不變，除非 vm.msg 變了。

有時但願 getter 不改變原有的行爲，每次訪問 vm.example 時都調用 getter。這時能夠爲指定的計算屬性關閉緩存：

computed : {
    example : {
        cache : false,
        get : function (){
            return Date.now() + this.msg
        }
    }
}

如今每次訪問 vm.example 時，時間戳都是新的。可是，只是在 JavaScript 中訪問是這樣的；數據綁定還是依賴驅動的。若是在模塊中這樣綁定計算屬性 {{example}} ，只有響應依賴發生變化時才更新DOM。

組件系統

組件（Component）是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性擴展。

1.建立和註冊組件：

能夠用 Vue.extend() 建立一個組件構造器：

var MyComponent = Vue.extend({
    template : '<div>A custom component!</div>'
})

要把這個構造器用做組件，須要用 Vue.component(tag, constructor) 註冊(這個註冊是全局的)：

//全局註冊組件，tag 爲 my-component
Vue.component('my-component',  MyComponent)

組件在註冊以後，即可以在父實例的模塊中以自定義元素 <my-component> 的形式使用。要確保在初始化根實例以前註冊了組件：

<div id="example">
    <my-component></my-component>
</div>

最後渲染爲：

<div id="example">
    <div>A custom component!</div>
</div>

固然，可讓組件只能用在其它組件內，用實例選項 components 註冊，好比：

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
    template : '...',
    components : {
        // <my-component> 只能用在父組件模板內
        'my-component': Child
    }
})

這種局部註冊的方式也適用於其它資源，好比指令、過濾器和過渡。他們都支持全局和局部組件註冊。

前面提到組件是能夠被複用的，多個實例可能會共享一個組件構造器，那麼請注意一個組件選項的問題：

傳入 Vue 構造器的多數選項也能夠用在 Vue.extend() 中，不過有兩個特例： data 和 el。試想若是咱們簡單地把一個對象做爲 data 選項傳給 Vue.extend() ：

var data = {a : 1}
var MyComponent = Vue.extend({
    data : data
})

這麼作的問題是 MyComponent 全部的實例將共享同一個 data 對象！由於對象是引用傳遞的，這基本不是咱們想要的，所以咱們應當使用一個函數做爲 data 選項，讓這個函數返回一個新對象：

var MyComponent = Vue.extend({
    data : function (){
        return {a : 1}
    }
})

同理，el 選項用在 Vue.extend() 中時也須是一個函數。

2.使用props傳遞數據

當一個組件內部還有一個子組件的時候，因爲組件實例的做用域是孤立的，這意味着不能而且不該該在子組件的模板內直接引用父組件的數據。這時，父組件可使用props把數據傳給子組件：

「prop」是組件數據的一個字段，指望從父組件傳下來。子組件須要顯式地用 props 選項聲明 props：

Vue.component('child', {
    //camelCase in JavaScript
    props : ['myMessage'],
    template : '<span>{{ myMessage }}</span>'
})

而後向它傳入一個普通字符串：

<child my-message="hello!"></child>

子組件的渲染結果：

因爲命名的習慣，請注意camelCase和kebab-case：HTML 特性不區分大小寫。名字形式爲 camelCase 的 prop 用做特性時，須要轉爲 kebab-case(短橫線隔開)。

根據vue響應的特性，props也能夠是動態的：

相似於用 v-bind 綁定 HTML 特性到一個表達式，也能夠用 v-bind 綁定動態 Props 到父組件的數據。每當父組件的數據變化時，也會傳導給子組件：

<div>
    <input v-model="parentMsg">
    <br/>
    <child v-bind:my-message="parentMsg"></child>
</div>

也可使用v-bind的縮寫語法來簡化綁定：

<child :my-message="parentMsg"></child>

渲染結果：

改變輸入框的值，子組件的文本會跟着改變

關於props的其餘介紹，請參考：props

3.父子組件的通訊

子組件能夠用 this.$parent 訪問它的父組件。根實例的後代能夠用 this.$root 訪問它。父組件有一個數組 this.$children ，包含它全部的子元素。

儘管能夠訪問父鏈上任意的實例，不過子組件應當避免直接依賴父組件的數據，儘可能顯式地使用 props 傳遞數據。另外，在子組件中修改父組件的狀態是很是糟糕的作法，由於：

這讓父組件與子組件緊密地耦合；

只看父組件，很難理解父組件的狀態。由於它可能被任意子組件修改！理想狀況下，只有組件本身能修改它的狀態。

Vue 實例實現了一個自定義事件接口，用於在組件樹中通訊。這個事件系統獨立於原生 DOM 事件，用法也不一樣。

每一個 Vue 實例都是一個事件觸發器：

使用 $on() 監聽事件；
使用 $emit() 在它上面觸發事件；
使用 $dispatch() 派發事件，事件沿着父鏈冒泡；
使用 $broadcast() 廣播事件，事件向下傳導給全部的後代。

不一樣於 DOM 事件，Vue 事件在冒泡過程當中第一次觸發回調以後自動中止冒泡，除非回調明確返回 true 。

一個簡單的例子：

<!-- 子組件模板 -->
<template id="child-template">
    <input v-model="msg">
    <button v-on:click="notify">Dispatch Event</button>
</template>

<!-- 父組件模板 -->
<div id="events-example">
    <p>Messages: {{ messages | json }}</p>
    <child></child>
</div>

在子組件的輸入框輸入值之後，點擊按鈕，父組件的Messages:[]文本會對應變化

4.再來講說動態組件

多個組件可使用同一個掛載點，而後動態地在它們之間切換。使用保留的 <component> 元素，動態地綁定到它的 is 特性：

new Vue({
    el : 'body',
    data : {
        currentView : 'home'
    },
    components : {
        home : { /* ... */ },
        posts : { /* ... */ },
        archive : { /* ... */ }
    }
})

<component :is="currentView">
    <!-- 組件在 vm.currentview 變化時改變 -->
</component>

若是把切換出去的組件保留在內存中，能夠保留它的狀態或避免從新渲染。爲此能夠添加一個 keep-alive 指令參數：

<component :is="currentView" keep-alive>
    <!-- 非活動組件將被緩存 -->
</component>

其餘動態組件的詳細介紹，請參考：動態組件

在建立複雜應用的時候，動態組件或許就顯得不那麼靈活了，這時可使用路由，vue-router路由擴展能夠看作是動態組件的升級版，可參考：vue-router

5.最後，組件實例的生命週期：

Vue 實例在建立時有一系列初始化步驟——例如，它須要創建數據觀察，編譯模板，建立必要的數據綁定。在此過程當中，它也將調用一些生命週期鉤子，給自定義邏輯提供運行機會。例如 created 鉤子在實例建立後調用：

var vm = new Vue({
    data : {
        a : 1
    },
    created : function (){
        // this 指向 vm 實例
        console.log('a is: ' + this.a)
    }
})
// => "a is: 1"

也有一些其它的鉤子，在實例生命週期的不一樣階段調用，如 compiled、 ready 、destroyed。鉤子的 this 指向調用它的 Vue 實例。一些用戶可能會問 Vue.js 是否有「控制器」的概念？答案是，沒有。組件的自定義邏輯能夠分割在這些鉤子中。

聲明週期的圖示：

組件的簡單介紹就到這裏。

Vuex

在大型應用中，狀態管理經常變得複雜，由於狀態分散在許多組件內，在不一樣的做用域內。以vue來講，當使用vue-router以及組件化開發(.vue)來構建大型單頁應用的時候，組件之間狀態的數據的傳遞會很困難，雖然props、dispatch、broadcast等可以進行跨組件的數據傳遞，可是大量使用它們會使組件之間的耦合程度很高，組件越多，層級越多，維護起來就越複雜。怎麼辦呢？可否在全局提供一個狀態管理構架？

這裏得提出一個概念：Flux

Flux是Facebook用來構建用戶端的web應用的應用程序體系架構。它經過利用數據的單向流動爲React的可複用的視圖組件提供了補充。相比於形式化的框架它更像是一個架構思想，不須要太多新的代碼你就能夠立刻使用Flux構建你的應用。

Flux應用主要包括三部分：dispatcher、store和views（React components），千萬不要和MVC(model-View-Controller)搞混。Controller在Flux應用中也確實存在，可是是以controller-view的形式。view一般處於應用的頂層，它從stores中獲取數據，同時將這些數據傳遞給它的後代節點。另外，action creators - dispatcher輔助方法 - 一個被用來提供描述應用全部可能存在的改變的語義化的API。把它理解爲Flux更新閉環的第四個組成部分能夠幫助你更好的理解它。

一句話：Flux就是手動將Action從數據流底層視圖中的事件手動綁定到數據頂層的數據流架構。

單向數據流的設計目的：任何UI不能直接對數據有寫操做，就是防止同一份數據有多個地方同時在寫。相對於直接進行雙向綁定，編碼稍微會複雜一點，但換來了排錯和維護的便捷。

Flux 架構經常使用於 React 應用中，但它的核心理念也能夠適用於 Vue.js 應用。好比 Vuex 就是一個借鑑於 Flux，可是專門爲 Vue.js 所設計的狀態管理方案。React 生態圈中最流行的 Flux 實現 Redux 也能夠經過簡單的綁定和 Vue 一塊兒使用。

什麼是Vuex

Vuex 是一個專門爲 Vue.js 應用所設計的集中式狀態管理架構。它借鑑了 Flux 和 Redux 的設計思想，但簡化了概念，而且採用了一種爲能更好發揮 Vue.js 數據響應機制而專門設計的實現。

爲何須要它？

當你的應用還很簡單的時候，你多半並不須要 Vuex。也不建議過早地使用 Vuex。但若是你正在構建一箇中型以上規模的 SPA，你頗有可能已經須要思考應該如何更好地概括 Vue 以外，應用的其餘組成部分。這就是 Vuex 要大顯身手的時刻。

咱們在單獨使用 Vue.js 的時候，一般會把狀態儲存在組件的內部。也就是說，每個組件都擁有當前應用狀態的一部分，整個應用的狀態是分散在各個角落的。然而咱們常常會須要把狀態的一部分共享給多個組件。一個常見的解決策略爲：使用定製的事件系統，讓一個組件把一些狀態「發送」到其餘組件中。這種模式的問題在於，大型組件樹中的事件流會很快變得很是繁雜，而且調試時很難去找出究竟哪錯了。

爲了更好的解決在大型應用中狀態的共用問題，咱們須要對組件的組件本地狀態(component local state) 和應用層級狀態(application level state) 進行區分。應用級的狀態不屬於任何特定的組件，但每個組件仍然能夠監視(Observe)其變化從而響應式地更新 DOM。經過彙總應用的狀態管理於一處，咱們就沒必要處處傳遞事件。由於任何牽扯到一個以上組件的邏輯，都應該寫在這裏。此外，這樣作也能讓咱們更容易地記錄並觀察狀態的變動（Mutation，原意爲突變），甚至能夠實現出華麗如時光旅行通常的調試效果。（譯註：是時候安利一波 vue-devtools 了）

Vuex 也對如何管理分撒各地的狀態增長了一些約束，但仍保留有足夠面對真實使用場景的靈活性。

必定須要它嗎？

Vuex有這麼多好處，但這並不表明咱們必定就要在項目中使用它。假如咱們的項目是一個管理平臺系統，通常無非是列表跳轉詳情這種搭配，不一樣列表頁面、不一樣詳情頁面之間沒有什麼相互關聯或者須要共享的狀態，也不會出現某一個須要獲取到全部詳情頁面的狀態這種需求。這時候咱們是不須要Vuex的，使用它只會增長項目的複雜度。下面將介紹到的活動發佈系統，最後建立的時候須要獲取到全部組件的數據，這個時候使用Vuex顯得十分有必要。若是你都不知道是否須要Vuex，那就不用它。

最簡單的store

建立 Vuex store 的過程至關直截了當 - 只要提供一個初始化的 state 對象，以及一些 mutations：

import Vuex from 'vuex'

const state = {
    count : 0
}

const mutations = {
    INCREMENT (state){
        state.count ++
    }
}

export default new Vuex.Store({
    state,
    mutations
})

如今，你能夠經過 store.state 來讀取 state 對象，還能夠經過 dispatch 某 mutation 的名字來觸發這些狀態變動：

store.dispatch('INCREMENT')

console.log(store.state.count) // -> 1

若是你傾向於對象風格的分發方式，你能夠用這種語法：

// 效果同上
store.dispatch({
    type : 'INCREMENT'
})

再次強調，咱們經過分發 mutation 的方式，而非直接改變 store.state ，是由於咱們想要更明確地追蹤到狀態的變化。這個簡單的約定可以讓你的意圖更加明顯，這樣你在閱讀代碼的時候能更容易地解讀應用內部的狀態改變。此外，這樣也讓咱們有機會去實現一些能記錄每次狀態改變，保存狀態快照的調試工具。有了它，咱們甚至能夠實現如時間穿梭般的調試體驗。

Vuex 使用單一狀態樹 —— 是的，用一個對象就包含了所有的應用層級狀態。至此它便做爲一個『惟一數據源(SSOT)』而存在。這也意味着，每一個應用將僅僅包含一個 store 實例。單狀態樹讓咱們可以直接地定位任一特定的狀態片斷，在調試的過程當中也能輕易地取得整個當前應用狀態的快照。

以上只是一個用來展現 store 到底是什麼的一個極簡例子。再談談三哥核心概念：State（狀態），Mutations（變動）和 Actions（動做）。

State和Getters

1.安裝 Vuex 而且將您的根組件引入 store 實例：

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'
import MyComponent from './MyComponent'

// 關鍵點，教 Vue 組件如何處理與 Vuex 相關的選項
Vue.use(Vuex)

var app = new Vue({
    el : '#app',
    store, // 把 store 對象提供給 「store」 選項，這能夠把 store 的實例注入全部的子組件
    components : {
     MyComponent
    }
})

經過在根實例中註冊 store 選項，該 store 實例會注入到根組件下的全部子組件中，且子組件能經過 this.$store 訪問到。不過事實上，咱們幾乎不會須要直接引用它。

2.在子組件中，經過在 vuex.getters 選項裏定義的 getter 方法來讀取狀態：

// MyComponent.js


export default {
    template : '...',
    data (){ ... },
    // 此處爲咱們從 store 實例中取回狀態的位置
    vuex : {
        getters : {
            // 該 getter 函數將會把倉庫的 `store.state.count` 綁定爲組件的 `this.count`
            count : (state) => state.count
        }
    }
}

請留意 vuex 的這個特殊選項（譯註：getters 子對象）。它是咱們指定當前組件能從 store 裏獲取哪些狀態信息的地方。它的每一個屬性名將對應一個 getter 函數。該函數僅接收 store 的整個狀態樹做爲其惟一參數，以後既能夠返回狀態樹的一部分，也能夠返回從狀態樹中求取的計算值。而返回結果，則會依據這個 getter 的屬性名添加到組件上，用法與組件自身的計算屬性一毛同樣。

組件不能直接修改store實例的狀態：

請始終記得很是重要的這點，就是：組件永遠都不該該直接改變 Vuex store 的狀態。由於咱們想要讓狀態的每次改變都很明確且可追蹤，Vuex 狀態的全部改變都必須在 store 的 mutation handler (變動句柄) 中管理。爲了強化該規則，在開啓(嚴格模式(Strict Mode))時，如有 store 的狀態在 mutation 句柄外被修改，Vuex 就會報錯。如今有了這一規則，咱們 Vue 組件的職能就少了不少：他們經過只讀的 getter 與 Vuex store 的狀態相綁定，組件惟一能影響全局狀態的方法就是想辦法觸發 mutations（咱們接下來會談到）。如有必要，組件仍然可以處理和操做本地狀態，可是咱們再也不在單獨的組件中放置任何數據請求或全局狀態變動的邏輯。這些操做所有都集中於 Vuex 相關的文件中，這樣能讓大型應用變得更容易理解和維護。

Mutation

Mutations 本質上是一個事件系統：每一個 mutation 都有一個事件名 (name) 和一個回調函數 (handler). 任何一個 Mutation handler 的第一個參數永遠爲所屬 store 的整個 state 對象：

import Vuex from 'vuex'

const store = new Vuex.Store({
    state : {
        count : 1
    },
    mutations : {
        INCREMENT (state){
            // 改變 state
            state.count ++
        }
    }
})

用所有大寫命名 mutation 是一個慣例，方便將它和 actions 區分開。

你不能直接調用 mutation handler. 這裏傳入 Store 構造函數的選項更像是在註冊事件回調：當INCREMENT 事件被觸發時，調用這個 handler。觸發 mutation handler 的方法是 dispatch 一個 mutation 的事件名：

store.dispatch('INCREMENT')

Mutation必須是同步函數：

　　由於當 mutation 觸發的時候，回掉函數尚未被調用，咱們不知道何時回調函數實際上被調用。任何在回調函數中進行的的狀態的改變都是不可追蹤的。

Mutation必須遵照Vue的響應系統規則：

　　1.儘量在建立 store 時就初始化 state 所須要的全部屬性。

　　2.當添加一個本來不存在的屬性時，須要使用 Vue.set(obj, 'newProp', 123) 或者拷貝並替換本來的對象。利用 stage 2 的語言特性 object spread syntax，咱們可使用這樣的語法: state.obj = {...state.obj, newProp : 123}

Actions

Actions 是用於分發 mutations 的函數。按照慣例，Vuex actions 的第一個參數是 store 實例，附加上可選的自定義參數。

// 最簡單的 action
function increment (store){
    store.dispatch('INCREMENT')
}

// 帶附加參數的 action
// 使用 ES2015 參數解構
function incrementBy ({dispatch}, amount){
    dispatch('INCREMENT', amount)
}

乍一眼看上去感受畫蛇添足，咱們直接分發 mutations 豈不更方便？實際上並不是如此，還記得 mutations 必須同步執行這個限制麼？Actions 就不受約束！咱們能夠在 action 內部執行異步操做，好比執行一個ajax請求數據的操做：

function getData ({dispatch}){
    ajax ({
        url : "...",
        data : {...},
        success : (data) => {
            dispatch("SET_DATA", data)
        }
    })
}

咱們能夠這樣在組件中調用actions：

// 某組件內部

// 導入actions
import {incrementBy} from './actions'

const vm = new Vue({
    vuex : {
        getters : { ... }, // state getters
        actions : {
            incrementBy
        }
    }
})

上述代碼所作的就是把原生的 incrementBy action 綁定到組件的 store 實例中，暴露給組件一個 vm.increamentBy 實例方法。全部傳遞給 vm.increamentBy 的參數變量都會排列在 store 變量後面而後一塊兒傳遞給原生的 action 函數，因此調用 vm.incrementBy(1) 等價於 incrementBy(vm.$store, 1) 。雖然多寫了一些代碼，可是組件的模板中調用 action 更加省力了：

<button v-on:click="incrementBy(1)">increment by one</button>

一般在大型 App 中，action 應該按不一樣目的進行分組 / 模塊化的管理，具體請參考： Actions

下面再談談一個重要的東西，數據流：

爲了更好地理解 Vuex app 中的數據流，咱們來開發一個簡單的計數器 app。注意：這個例子僅僅是爲了更好地解釋概念，在實際狀況中並不須要在這種簡單的場合使用 Vuex.

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 應用初始狀態
const state = {
    count : 0
}

// 定義所需的 mutations
const mutations = {
    INCREMENT (state){
        state.count ++
    },
    DECREMENT (state){
        state.count --
    }
}

// 建立 store 實例
export default new Vuex.Store({
    state,
    mutations
})

// actions.js
export const increment = ({ dispatch }) => dispatch('INCREMENT')
export const decrement = ({ dispatch }) => dispatch('DECREMENT')

<!- temmplate -->
<div>
    Clicked: {{ count }} times
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
</div>

// 僅須要在根組件中注入 store 實例一次便可
import store from './store'
import {increment, decrement} from './actions'

const app = new Vue({
    el : '#app',
    store,
    vuex : {
        getters: {
            count: state => state.count
        },
        actions: {
            increment,
            decrement
        }
    }
})

你會注意到組件自己很是簡單：它所作的僅僅是綁定到 state、而後在用戶輸入時調用 actions。

你也會發現整個應用的數據流是單向的，正如 Flux 最初所定義的那樣：

1.用戶在組件中的輸入操做觸發 action 調用。
2.Actions 經過分發 mutations 來修改 store 實例的狀態。
3.Store 實例的狀態變化反過來又經過 getters 被組件獲知。

最後：Vuex 並不強制要求全部的狀態都必須放在 Vuex store 中，若是有些狀態你以爲並無須要對其變化進行追蹤，那麼你徹底能夠把它放在 Vuex 外面(好比做爲組件的本地狀態)。好比公共組件對外的接口，經過props傳遞數據更爲有效。

Vuex的完整介紹請參考：Vuex

vue-devtools

vue-devtools是chrome的一個vue開發插件，能夠在chrome商店下載crx擴展包進行安裝。提供Components和Vuex預覽(state變化跟蹤等)功能，有助於開發和調試。

能夠看到組件的prop屬性、計算屬性、vue getter屬性等，以及Vuex中的觸發的mutation、state 當前的值等咱們可能關注的內容都直觀地展現了出來。

Vue模塊化

對於大型項目，爲了更好地管理代碼使用模塊構建系統很是必要。推薦代碼使用 CommonJS 或 ES6 模塊，而後使用 Webpack 或 Browserify 打包。

Webpack 和 Browserify 不僅是模塊打包器。二者都提供了源碼轉換 API，經過它能夠用其它預處理器轉換源碼。例如，藉助 babel-loader 或 babelify 代碼可使用 ES2015/2016 語法。

你可使用 Webpack + vue-loader 或 Browserify + vueify 構建這些單文件 Vue 組件。

選擇哪一種構建工具取決於你的經驗和需求。Webpack 的功能更強大，如代碼分割，將靜態資源看成模塊，提取組件的 CSS 到單獨的一個文件等，不過它的配置相對複雜一點。若是你不須要 Webpack 的那些功能，使用 Browserify 更簡單，最快的構建方式是使用官方出品的腳手架工具 vue-cli。參考：vue-cli

活動模板設計系統

這個設計系統只是對活動模板要展現的內容進行設計，具體的樣式和交互由活動h5頁面根據視覺和交互設計來定奪。活動裏面的每個子項均可以抽象爲一個組件，h5展現端拿到每一個組件的內容再套上對應組件的樣式和交互邏輯，最終就造成了一個h5活動頁面。

每個活動組件對應三個模式組件：

　　1.標籤組件，經過拖動來建立對應類型的組件

2.預覽組件，展現當前組件各項的內容

3.編輯組件，用來編輯當前選中的組件的各項內容

完成後大概是這樣的，以一個最簡單的節標題組件爲例：

如上圖所示：左側容器排列着這些經常使用組件的標籤。將活動須要的組件標籤拖入預覽區域後，會生成對應的預覽組件和編輯組件；點擊這個預覽組件，組件編輯區域會顯示對應的編輯組件；在編輯組件中能夠對組件各項進行編輯。編輯完成後，經過事先的數據綁定，預覽區域對應的組件就會更新視圖，顯示組件當前的最新內容。

以上就是這個系統的一個大概方案，下面談談具體的實現。

首先，從標籤區域開始：

標籤組件是每一個活動組件的開端，也就說每個標籤組件必須有一個屬性來標識它表明的是哪個活動組件。那就先給它們指定類型 type：

　　節標題 type ：'sectionTitle'

　　投票 type ：'vote'

　　正文 type ：'content'

　　用戶 type ：'user'

　　圖片 type ：'image'

　　視頻 type ：'video'

　　音頻 type ：'audio'

　　跳轉連接 type ：'link'

而後每當咱們拖動一個標籤組件到預覽區域，再根據該標籤組件的type生成對應的預覽和編輯組件。預覽和編輯組件須要肯定的無非就是有哪些編輯項，這些編輯項是什麼內容。以節標題組件爲例，它就只有一個編輯項：節標題的文本。也就是說節標題的預覽組件用來顯示節標題的文本，編輯組件須要有一個文本域來對節標題文本進行編輯，在模板事先綁定好對應的數據，文本域的數據變化會反應到預覽組件的DOM上。

咱們須要有一個保存全部組件數據(對象)的容器，可使用一個數組。

我更喜歡操做一個數組而不是對象的緣由：vue對數組的基本方法(push、splice、shift等)都進行了封裝，經過這些方法來改變數組的數據，結果都是響應的。而在保持響應的狀況下，改變對象的數據要麻煩些，特別是複雜的嵌套對象。若是使用對象能夠經過id直接匹配到對應數據，經過數組須要遍歷一下。可是有了es6的for of，代碼仍是很簡單，並且也不是在操做DOM，性能影響不大。

//widgetData.js

[
    {id : "100",type : "vote", ...}, //投票
    {id : "101",type : "image", ...}, //圖片
    {id : "102",type : "video", ...}, //視頻
]

每一個組件數據對象的id屬性是惟一的，是拖入標籤組件時生成的，這個id屬性是關聯預覽組件與對應編輯組件的關鍵，經過它能夠找到每一個預覽組件對應的編輯組件。爲何不經過type來判斷呢？由於每一個活動可能有多個相同的組件，好比節標題。經過type無法肯定對應關係。

這裏咱們經過Vuex建立一個store來存儲及修改這個數組(官方點的說法就是管理state狀態)。按照上面提到的Vuex的數據流規則：UI不容許直接修改數據。在編輯項裏面改變某項輸入框的值，並非直接改變了對應組件數據中那一項的值，而是經過DOM事件觸發對應的action，action再派發對應的mutaion處理函數來修改state。這種方式能夠確保全部對某項組件數據的修改都是經過觸發某一個公共的action來完成的，這個action就是進行某項修改的統一和惟一的入口。

當咱們知道須要生成什麼預覽和編輯組件的時候，並放進組件數據容器的時候，咱們就必須知道這個組件到底有哪些編輯項(除了組件類型外，咱們放入的這個組件數據對象還須要哪些屬性)，這時候咱們就須要一個map，來管理組件type和組件編輯項的關係，以活動的投票組件爲例：

根據需求，投票組件須要有如下編輯項：

1.投票的標題

2.投票項，每項要有一個名稱，後續每項可能還會有其餘屬性(相似正確選項的標記等)

//typeDataMap.js

export default {
    vote : {
        type : "vote",
        title : "投票標題文本",
        items : [
            {name : "投票項1"},  //每一個投票項
            {name : "投票項2"},
            {name : "投票項3"}
        ]
    }
}

只要知道是什麼類型，經過 typeData[type] 就能獲取到組件數據並存入組件數據容器了。因爲咱們在預覽組件和編輯組件的模板視圖已事先對DOM進行了數據綁定，當咱們改變組件容器中某個組件的數據項時，更新就會反應到DOM上。當咱們保存整個模板的時候，只須要取出組件數據容器中的值就好了，其實也就是那個數組自己。H5展現端經過這個組件數據數組，能夠拿到組件的數據以及排序，按照定好的模板渲染出來便可。固然，像投票組件這類有交互數據的組件，該系統設計的模板只是肯定了要展現的固定的內容。具體的投票總數、每項投票數等屬性須要後端處理後插入到對應組件數據裏面，供展現端顯示。

整個系統大概的設計思想就是這樣的，下面挑些具體的來說講：

標籤組件

由於標籤組件的表現和交互邏輯等都是一致的，這裏作了一個公共可複用的標籤組件，對外接收兩個參數：title(標籤文本)和type(標籤類型)。在標籤容器組件建立一個包含全部標籤組件數據對象的數組，在模板視圖中遍歷這個數組，就建立了全部的標籤組件。

公共標籤組件的統一的屬性和方法等存入了一個對象字面量裏面，導入之後經過mixin方式混合，組件就會擁有這些屬性和方法。目前這樣作的意義不大，由於已經有一個公共的標籤組件了，mixin裏面的東西徹底能夠直接寫到這個公共組件內。但若是每一個類型的標籤組件都是一個單獨的.vue組件文件，mixin的好處就體現出來了：可複用、易維護。

具體實現的代碼，省略掉樣式

//labelWrapper.vue 標籤組件容器(組件標籤區域)

<template>
    <div class="label-wrapper">
        <div class="label-title">組件標籤區域</div>
        <div class="label-box">
            <common-label v-for="label in labelArr" :title="label.title" :type="label.type"></common-label>
        </div>
    </div>
</template>

<script>
    import commonLabel from './widget/commonLabel.vue' //導入公共標籤組件

    export default {
        name : "label_wrapper",
        components : {
            commonLabel //註冊爲子組件(es6同名對象字面量縮寫)
        },
        data (){
            return {
                labelArr : [
                    {title : "節標題", type : "sectionTitle"},
                    {title : "投票", type : "vote"},
                    {title : "正文", type : "content"},
                    {title : "用戶", type : "user"},
                    {title : "圖片", type : "image"},
                    {title : "視頻", type : "video"},
                    {title : "音頻", type : "audio"},
                    {title : "跳轉連接", type : "link"}
                ]
            }
        }
    }
</script>

<style lang="stylus">
    /*...*/
</style>

//commonLabel.vue 公共標籤組件

<template>
    <div class="label-item-wrapper" title="拖入模板設計區域" draggable="true" @dragstart="dragStart">
        <img class="label-icon" alt="{{title}}" :src="iconUrl">
        <span class="label-text">{{title}}</span>
    </div>
</template>

<script>
    //導入mixin
    import labelMixin from './mixin/labelMixin'

    export default {
        name : "label",
        props : {
            title : String,
            type : String
        },
        mixins : [labelMixin],
        computed : {
            iconUrl (){
                return  this.type + '.png'
            }
        }
    }
</script>

<style lang="stylus">
    /*...*/
</style>

//labelMixin.js

import typeDataMap from './typeDataMap'

export default {
    methods : {
        dragStart (e){
            var id = parseInt(Date.now() + "" + parseInt(Math.random() * 90))
            var widgetData = typeDataMap[this.type]
　　　　　　　var dt = e.dataTransfer
            widgetData['id'] = id
            dt.setData("id", id)
            dt.setData("type", this.type)
            dt.setData("widgetData", JSON.stringify(widgetData))
        }
    }
}

預覽組件

預覽組件相對較簡單，除了數據的綁定，就是拖動排序。拖動排序的實現是經過html5原生的drag事件，基於vue數據驅動的原理，拖動的時候並不須要去手動改變預覽區域內各組件的DOM順序，只須要改變組件數據數組裏面各數據對象的index便可，數據的變化會反應到DOM上。簡單的節標題預覽組件：

<template>
    <div class="preview-item-wrapper" draggable="true" :class="{'active': isActive}" 
        @click="showEdit" 
        @dragover="allowDrop" 
        @dragstart="dragStart" 
        @drop="dropIn"
    >
        <span class="preview-item-del" :class="{'active': isActive}" title="刪除該組件">
            <div v-on:click="delMe">x</div>
        </span>
        <label class="preview-item-label">- 節標題 -</label>
        <div class="preview-item-input-wrapper">
            <div class="title-text">{{text}}</div>
        </div>
    </div>
</template>

<script>
    //導入action
    import {addPreviewAndData, deleteWidgetPreview, changeWidgetEdit, changPreviewAndDataIndex} from '../../../store/actions'
    //導入mixin
    import previewMixin from './mixin/previewMixin'

    export default {
        name : "sectionTitle_preview",
        mixins : [previewMixin],
        props : {
            id : Number,
            index : Number
        },
        computed : {
            //mixin外的私有屬性
            text (){
                for (let value of this.widgetDataArr)
                    if (value.id == this.id) return value.text
            }
        },
        vuex : {
            //綁定mixin須要的屬性和方法
            getters : {
                 widgetDataArr : (state) => state.widgetDataArr,
                 currentEditWidgetId : (state) => state.currentEditWidgetId
            },
            actions : {
                addPreviewAndData,
                deleteWidgetPreview,
                changeWidgetEdit,
                changPreviewAndDataIndex
            }
        }
    }
</script>

<style lang="stylus">
    /*...*/
</style>

/**
 * previewMixin.js
 * 預覽組件的mixin
 * @提取同類組件之間可複用的計算屬性與方法
 */

export default {
    computed : {
        //該預覽組件是否爲當前點擊的
        isActive (){
            return this.id == this.currentEditWidgetId
        }
    },
    methods : {
        //刪除該預覽組件
        delMe (){
            this.deleteWidgetPreview(this.id)
        },
        //顯示該預覽組件對應的編輯組件
        showEdit (){this.changeWidgetEdit(this.id)
        },
        //容許向該預覽組件拖放其餘組件
        allowDrop (e){
            e.preventDefault();
        },
        //開始拖放該預覽組件
        dragStart (e){
            var dt = e.dataTransfer
            dt.setData("index", this.index)
        },
        //向該預覽組件拖放其餘組件(預覽組件或者標籤組件)
        dropIn (e){
            e.preventDefault()
            e.stopPropagation()
            var dt = e.dataTransfer
            var id = parseInt(dt.getData("id"))
            if (id){ //有id代表拖入的是標籤組件
                var type = dt.getData("type")
                var widgetData = JSON.parse(dt.getData("widgetData"))this.changeWidgetEdit(id)
                this.addValidation(id) //添加組件驗證項
            } else {
                var index = parseInt(dt.getData("index"))
                this.changPreviewAndDataIndex(index, this.index)
            }
            //清空dataTransfer
            dt.clearData()
        }
    }
}

編輯組件

仍是以節標題組件爲例：

<template>
    <div class="edit-item-wrapper">
        <label class="edit-item-label">節標題文本</label>
        <validator name="titleValidator">
            <div class="edit-item-input-wrapper">
                <textarea class="title-edit-input" placeholder="必填項，16字之內" 
                    v-model="text" 
                    v-validate:text="{
                        required: {rule: true,message: '請填寫節標題文本'},
                        maxlength: {rule: 16,message: '節標題文本限制在16字之內'}
                    }" 
                    @input="inputValue" 
                    @valid="onValid" 
                    @invalid="onInvalid"
                ></textarea>
                <div class="edit-input-err" v-if="$titleValidator.text.required">{{$titleValidator.text.required}}</div>
                <div class="edit-input-err" v-if="$titleValidator.text.maxlength">{{$titleValidator.text.maxlength}}</div>
            </div>
        </validator>
    </div>
</template>

<script>
    //導入action
    import {changeWidgetData, changeValidation} from '../../../store/actions'
    //導入mixin
    import editMixin from './mixin/editMixin'

    export default {
        name : "title_edit",
        mixins : [editMixin],
        props : {
            id : Number
        },
        computed : {
            //mixin外的私有屬性
            text (){
                for (let value of this.widgetDataArr)
                    if (value.id == this.id) return value.text
            }
        },
        methods : {
            //mixin外的私有方法
            inputValue (e){
                this.changeWidgetData(this.id, 'text', e.target.value)
            }
        },
        vuex : {
             getters : {
                 widgetDataArr : (state) => state.widgetDataArr
            },
            actions : {
                changeWidgetData,
                changeValidation
            }
        }
    }
</script>

<style lang="stylus">
        /*...*/
</style>

/**
 * editMixin.js
 * 編輯組件的mixin
 */

export default {
    data (){
        return {
            //isValid : false
        }
    },
    methods : {
        onValid (){ //驗證經過
            this.isValid = true
            this.changeValidation(this.id, true)
        },
        onInvalid (){ //驗證失敗
            this.isValid = false
            this.changeValidation(this.id, false)
        }
    }
}

還有一些公共組件以及store等就再也不介紹了，前面的講解已基本包含，差很少就到這裏了。最後完成後是這樣的：

活動的展現端

在編輯完全部組件後，保存該活動ID和一個包含全部組件數據對象的數組到server端數據庫中。我司的活動是用H5作的，H5頁面按活動ID到server獲取到該活動的組件數據，按照數組中的順序和內容依次渲染便可生成對應的H5活動頁面。固然H5端也須要有一套組件化的實現方案，並與活動發佈端有統一的組件和相應屬性的命名規範等。

本文由淺入深闡述了ES6和Vue相關的內容和mvvm的思想。其中關於Vue API概述的內容，大部分引用自Vue官方1.x中文文檔，非本人原創並翻譯，如有轉載需求，請註明原始出處。