?

前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點(diǎn)擊跳轉(zhuǎn)到教程。

前言

公司目前制作一個(gè)H5活動(dòng)，特別是有一定統(tǒng)一結(jié)構(gòu)的活動(dòng)，都要碼一個(gè)重復(fù)的輪子。后來(lái)接到一個(gè)基于模板的活動(dòng)設(shè)計(jì)系統(tǒng)的需求，便有了一下的內(nèi)容。首先會(huì)對(duì)使用Vue進(jìn)行開(kāi)發(fā)的一些前期需要的技術(shù)儲(chǔ)備進(jìn)行簡(jiǎn)單介紹。

?

組件化

需求一到，接就是怎么實(shí)現(xiàn)，技術(shù)選型自然成為了第一個(gè)問(wèn)題。鑒于目前web前端mvvm框架以及組件化開(kāi)發(fā)方式的流行，決定技術(shù)棧采用：vue + vuex + es6 + browserify。

這里首先簡(jiǎn)單說(shuō)下web前端組件化開(kāi)發(fā)方式的歷程：

最早的組件化結(jié)構(gòu)，代碼結(jié)構(gòu)可能如下：

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

將同功能的組件文件放到同一目錄下，結(jié)構(gòu)清晰、職責(zé)明確，視圖、樣式、腳本的關(guān)系顯著，也易于單元測(cè)試，是獨(dú)立展示和交互的最小單元。

后來(lái)：

在之前基礎(chǔ)上對(duì)組件進(jìn)行了生命周期的加工(初始化、獲取資源、渲染、更新、銷(xiāo)毀等)，理順了組件的各個(gè)階段，有助于對(duì)組件實(shí)現(xiàn)(從初始化到銷(xiāo)毀)的理解。并且借助于組件各個(gè)階段的鉤子可以對(duì)組件有更好的利用和擴(kuò)展。對(duì)外暴露接口，數(shù)據(jù)綁定或者說(shuō)數(shù)據(jù)倉(cāng)庫(kù)的加入，各種xMD模塊加載器的出現(xiàn)，也讓這種這種開(kāi)發(fā)方式上升了一個(gè)層級(jí)。ExtJs、YUI等都是這方面的專(zhuān)家。

再后來(lái)：

有了之前發(fā)展，進(jìn)步是很大的，但依然不夠。組件的可復(fù)用性(基礎(chǔ)樣式，基礎(chǔ)邏輯，基礎(chǔ)屬性、可復(fù)用的穩(wěn)定業(yè)務(wù)邏輯等)、組件間通信、全局狀態(tài)管理、甚至是能否有更好的代碼組織方式等依然是問(wèn)題。Angular、React、Polymer、Vue等mvvm框架和webpack、browserify等構(gòu)建、預(yù)編譯工具的出現(xiàn)正試圖解決這些問(wèn)題。

?

ES6

在正式開(kāi)始vue之前，因?yàn)楸卷?xiàng)目用到了es6，那么就談?wù)劥蠹叶缄P(guān)注的EcmaScript6。多余的就不說(shuō)了，es6經(jīng)歷了多年的苦，終于在2015年下半年定稿，正式名稱(chēng)：EcmaScript2015。每個(gè)剛開(kāi)始接觸es6的人應(yīng)該都有這么一個(gè)問(wèn)題，es6的出現(xiàn)到底是為了什么，或者說(shuō)它解決了什么。老版本es4/5雖然坑多，就像Brendan Eich評(píng)價(jià)js一樣："優(yōu)秀之處并非原創(chuàng)，原創(chuàng)之處并不優(yōu)秀"。但我們不也是去其槽粕，留其精髓，一路填坑走過(guò)了嗎？

來(lái)直接一點(diǎn)，es6常用的特性有：class類(lèi)的支持、箭頭函數(shù)、對(duì)象和數(shù)組的解構(gòu)、默認(rèn)參數(shù)、不定參數(shù)、對(duì)象合并、let與const關(guān)鍵字、for of迭代、字符串模板、對(duì)象字面量增強(qiáng)、同名對(duì)象字面量縮寫(xiě)、模塊化import/export、map、promise、* yeild生成器等。

這里挑出幾個(gè)常用的簡(jiǎn)單說(shuō)下：

首先class:

在沒(méi)有class的時(shí)候，創(chuàng)建類(lèi)的一種比較標(biāo)準(zhǔn)的方式是將非函數(shù)的屬性放到構(gòu)造函數(shù)里，函數(shù)屬性在原型鏈里添加。類(lèi)的繼承的實(shí)現(xiàn)就更為多樣：對(duì)象冒充、call/apply方式、原型鏈方式等。es6的class和extends關(guān)鍵字的出現(xiàn)給出了一個(gè)統(tǒng)一的規(guī)范

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

可以看出雖然是新的規(guī)范，但是還是遵守js的原則：對(duì)象的__proto__指向它的構(gòu)造函數(shù)(類(lèi))的prototype。es6對(duì)象字面量的__proto__注入也能快速的實(shí)現(xiàn)繼承。

?

在純Vue組件中，我們不會(huì)自己寫(xiě)class，因?yàn)閂ue是高度封裝的，我們只需要給底層的class傳入我們的配置對(duì)象即可，但了解es6的class也是有必要的。Vue的這點(diǎn)相對(duì)react來(lái)說(shuō)，是一個(gè)顯著不同的地方。

接下來(lái)是let：

es6之前js只有函數(shù)作用域，let的出現(xiàn)有了塊級(jí)作用域，也就算是if、else、for這類(lèi)也有了作用域，塊內(nèi)用let聲明的變量外面是訪(fǎng)問(wèn)不到的，在js預(yù)解析的時(shí)候，是不會(huì)被提升到當(dāng)前函數(shù)作用域的前面的。基于該特性，在for迭代的時(shí)候，每次迭代都會(huì)產(chǎn)生一個(gè)塊級(jí)作用域的獨(dú)立的迭代變量，讓最后的結(jié)果就是我們期待的結(jié)果。

var arr = []; for (let i = 0; i < 10; i ++){arr[i] = function (){return i} }arr[6]() // => 6//如果用var聲明i，無(wú)論多少次迭代，外層的i始終被每次迭代的函數(shù)內(nèi)部引用著(閉包)，不會(huì)被當(dāng)做垃圾回收，最后的結(jié)果都指向同一個(gè)i，值為10。 //以往為了避免這個(gè)問(wèn)題，通常會(huì)這么做：for (var i = 0; i < 10; i ++){arr[i] = (function (i){return function (){return i}})(i) }

最后講講箭頭函數(shù)：

es6之前的function有一個(gè)特點(diǎn)：函數(shù)內(nèi)部的上下文并不是由該函數(shù)寫(xiě)在那里決定的，而是由誰(shuí)調(diào)用決定的，誰(shuí)調(diào)用函數(shù)內(nèi)部的this就指向誰(shuí)。然后我們有些時(shí)候并不想讓他這樣，但又沒(méi)辦法，只能通過(guò)先保存this，或者call/apply，或者bind來(lái)調(diào)整上下文。箭頭函數(shù)的出現(xiàn)解決了這個(gè)寧人苦惱的問(wèn)題，因?yàn)榧^函數(shù)內(nèi)的上下文(this)是由函數(shù)寫(xiě)在哪決定的，無(wú)論被哪個(gè)對(duì)象調(diào)用，上下文都不會(huì)改變。

// 在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 (){ // 對(duì)象增強(qiáng)寫(xiě)法console.info(this);} }obj.test1() // => Window {} obj.test2() // => obj {} obj.test3() // => Window {} obj.test4() // => obj {} obj.test5() // => obj {}

箭頭函數(shù)this鎖定特性值得細(xì)細(xì)品味，在目前的Vue或者React應(yīng)用中有妙用。

用普通函數(shù)還是箭頭函數(shù)并非絕對(duì)，箭頭函數(shù)也不能完全替代普通函數(shù)，要用哪個(gè)由具體邏輯決定，前提是要先了解他們的區(qū)別。

箭頭函數(shù)還有一個(gè)特點(diǎn)就是能夠簡(jiǎn)化return的書(shū)寫(xiě)。

var a = function (n){return n }var b = (n) => n //可以省略return和花括號(hào)var c = n => n //如果只有一個(gè)參數(shù)，中括號(hào)也可以省略a(1) // => 1 b(1) // => 1 c(1) // => 1

?從這幾個(gè)簡(jiǎn)單的例子可以看出，es6不僅僅是新增了幾顆糖，對(duì)之前js的一些不友好的地方的改善才是重點(diǎn)。

?

Vue

進(jìn)入正題，

Vue.js（讀音 /vju?/, 類(lèi)似于?view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫(kù)。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js 自身不是一個(gè)全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫(kù)一起使用時(shí)，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。

?

— 文中關(guān)于vue的大部分內(nèi)容引用自vue的官方文檔，感謝作者的工作！

?

響應(yīng)的數(shù)據(jù)綁定：

<div id="app"><p>{{ message }}</p><input v-model="message"> </div> new Vue({el : '#app',data : {message : 'Hello Vue.js!'} })

結(jié)果：改變輸入框的值，<p>標(biāo)簽的文本也會(huì)對(duì)應(yīng)改變。

?

基本工作原理：<input>輸入框的值與vue實(shí)例的message屬性進(jìn)行了綁定，<p>標(biāo)簽的文本也與message屬性進(jìn)行了綁定。輸入框值的變化會(huì)改變message的值，message值的變化會(huì)反應(yīng)到<p>標(biāo)簽的文本上。

?

Vue.js 的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與 DOM 保持同步非常簡(jiǎn)單。在使用 jQuery 手工操作 DOM 時(shí)，我們的代碼常常是命令式的、重復(fù)的與易錯(cuò)的。Vue.js 擁抱數(shù)據(jù)驅(qū)動(dòng)的視圖概念。通俗地講，它意味著我們?cè)谄胀?HTML 模板中使用特殊的語(yǔ)法將 DOM “綁定”到底層數(shù)據(jù)。一旦創(chuàng)建了綁定，DOM 將與數(shù)據(jù)保持同步。每當(dāng)修改了數(shù)據(jù)，DOM 便相應(yīng)地更新。這樣我們應(yīng)用中的邏輯就幾乎都是直接修改數(shù)據(jù)了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫(xiě)、理解與維護(hù)。

組件系統(tǒng)：

組件系統(tǒng)是 Vue.js 另一個(gè)重要概念，因?yàn)樗峁┝艘环N抽象，讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用。如果我們考慮到這點(diǎn)，幾乎任意類(lèi)型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)：

?

實(shí)際上，一個(gè)典型的用 Vue.js 構(gòu)建的大型應(yīng)用將形成一個(gè)組件樹(shù)。

你可能已經(jīng)注意到 Vue.js 組件非常類(lèi)似于自定義元素——它是 Web 組件規(guī)范的一部分。實(shí)際上 Vue.js 的組件語(yǔ)法參考了該規(guī)范。例如 Vue 組件實(shí)現(xiàn)了 Slot API 與 is 特性。但是，有幾個(gè)關(guān)鍵的不同：

Web 組件規(guī)范仍然遠(yuǎn)未完成，并且沒(méi)有瀏覽器實(shí)現(xiàn)。相比之下，Vue.js 組件不需要任何補(bǔ)丁，并且在所有支持的瀏覽器（IE9 及更高版本）之下表現(xiàn)一致。必要時(shí)，Vue.js 組件也可以放在原生自定義元素之內(nèi)。

Vue.js 組件提供了原生自定義元素所不具備的一些重要功能，比如組件間的數(shù)據(jù)流，自定義事件系統(tǒng)，以及動(dòng)態(tài)的、帶特效的組件替換。

組件系統(tǒng)是用 Vue.js 構(gòu)建大型應(yīng)用的基礎(chǔ)。另外，Vue.js 生態(tài)系統(tǒng)也提供了高級(jí)工具與多種支持庫(kù)，它們和 Vue.js 一起構(gòu)成了一個(gè)更加“框架”性的系統(tǒng)。

?

這里簡(jiǎn)單介紹下vue最常用也較重要的兩塊：響應(yīng)式原理和組件系統(tǒng)。

?

響應(yīng)式原理：

?

Vue.js的數(shù)據(jù)觀測(cè)實(shí)現(xiàn)原理和Angular有著本質(zhì)的不同。了解Angular的讀者可能知道，Angular的數(shù)據(jù)觀測(cè)采用的是臟檢查（dirty checking）機(jī)制。每一個(gè)指令都會(huì)有一個(gè)對(duì)應(yīng)的用來(lái)觀測(cè)數(shù)據(jù)的對(duì)象，叫做watcher；一個(gè)作用域中會(huì)有很多個(gè)watcher。每當(dāng)界面需要更新時(shí)，Angular會(huì)遍歷當(dāng)前作用域里的所有watcher，對(duì)它們一一求值，然后和之前保存的舊值進(jìn)行比較。如果求值的結(jié)果變化了，就觸發(fā)對(duì)應(yīng)的更新，這個(gè)過(guò)程叫做digest cycle。

臟檢查有兩個(gè)問(wèn)題：

1.任何數(shù)據(jù)變動(dòng)都意味著當(dāng)前作用域的每一個(gè)watcher需要被重新求值，因此當(dāng)watcher的數(shù)量龐大時(shí)，應(yīng)用的性能就不可避免地受到影響，并且很難優(yōu)化。
2.當(dāng)數(shù)據(jù)變動(dòng)時(shí)，框架并不能主動(dòng)偵測(cè)到變化的發(fā)生，需要手動(dòng)觸發(fā)digest cycle才能觸發(fā)相應(yīng)的DOM 更新。Angular通過(guò)在DOM事件處理函數(shù)中自動(dòng)觸發(fā)digest cycle部分規(guī)避了這個(gè)問(wèn)題，但還是有很多情況需要用戶(hù)手動(dòng)進(jìn)行觸發(fā)。

Vue.js采用的則是基于依賴(lài)收集的觀測(cè)機(jī)制。從原理上來(lái)說(shuō)，和老牌MVVM框架Knockout是一樣的。依賴(lài)收集的基本原理是：

1.將原生的數(shù)據(jù)改造成 “可觀察對(duì)象”。一個(gè)可觀察對(duì)象可以被取值，也可以被賦值。
2.在watcher的求值過(guò)程中，每一個(gè)被取值的可觀察對(duì)象都會(huì)將當(dāng)前的watcher注冊(cè)為自己的一個(gè)訂閱者，并成為當(dāng)前watcher的一個(gè)依賴(lài)。
3.當(dāng)一個(gè)被依賴(lài)的可觀察對(duì)象被賦值時(shí)，它會(huì)通知所有訂閱自己的watcher重新求值，并觸發(fā)相應(yīng)的更新。
4.依賴(lài)收集的優(yōu)點(diǎn)在于可以精確、主動(dòng)地追蹤數(shù)據(jù)的變化，不存在上述提到的臟檢查的兩個(gè)問(wèn)題。但傳統(tǒng)的依賴(lài)收集實(shí)現(xiàn)，比如Knockout，通常需要包裹原生數(shù)據(jù)來(lái)制造可觀察對(duì)象，在取值和賦值時(shí)需要采用函數(shù)調(diào)用的形式，在進(jìn)行數(shù)據(jù)操作時(shí)寫(xiě)法繁瑣，不夠直觀；同時(shí)，對(duì)復(fù)雜嵌套結(jié)構(gòu)的對(duì)象支持也不理想。

Vue.js利用了ES5的Object.defineProperty方法，直接將原生數(shù)據(jù)對(duì)象的屬性改造為getter和setter(這是ES5的特性，需要js解釋引擎的支持，無(wú)法通過(guò)各種打shim補(bǔ)丁來(lái)實(shí)現(xiàn)，至少現(xiàn)在的babel pollyfill和各種shim是沒(méi)法的。這也是為什么Vue不支持IE8及以下版本的原因，因?yàn)镮E8的defineProperty只支持DOM對(duì)象，純Object會(huì)報(bào)錯(cuò)。)，在這兩個(gè)函數(shù)內(nèi)部實(shí)現(xiàn)依賴(lài)的收集和觸發(fā)，而且完美支持嵌套的對(duì)象結(jié)構(gòu)。對(duì)于數(shù)組，則通過(guò)包裹數(shù)組的可變方法（比如push）來(lái)監(jiān)聽(tīng)數(shù)組的變化。這使得操作Vue.js的數(shù)據(jù)和操作原生對(duì)象幾乎沒(méi)有差別[注:在添加/刪除屬性，或是修改數(shù)組特定位置元素時(shí)，需要調(diào)用特定的函數(shù)，如obj.$add(key, value)才能觸發(fā)更新。這是受ES5的語(yǔ)言特性所限。在操作對(duì)象類(lèi)型數(shù)據(jù)的時(shí)候一定要注意這點(diǎn)，否則無(wú)法實(shí)現(xiàn)響應(yīng)。

?

變化檢測(cè)：

受 ES5 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除。因?yàn)?Vue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對(duì)象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。例如：

var data = {a : 1} var vm = new Vue({data : data }) //vm.a 和 data.a 現(xiàn)在是響應(yīng)的vm.b = 2 //vm.b 不是響應(yīng)的data.b = 2 //data.b 不是響應(yīng)的

不過(guò)，有辦法在實(shí)例創(chuàng)建之后添加屬性并且讓它是響應(yīng)的。

對(duì)于 Vue 實(shí)例，可以使用 $set(key, value) 實(shí)例方法：

vm.$set('b', 2) //vm.b 和 data.b 現(xiàn)在是響應(yīng)的

對(duì)于普通數(shù)據(jù)對(duì)象，可以使用全局方法 Vue.set(object, key, value)：

Vue.set(data, 'c', 3) //vm.c 和 data.c 現(xiàn)在是響應(yīng)的

有時(shí)你想向已有對(duì)象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 添加屬性。但是，添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。這時(shí)可以創(chuàng)建一個(gè)新的對(duì)象，包含原對(duì)象的屬性和新的屬性：

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

?

計(jì)算屬性的奧秘：

你應(yīng)該注意到 Vue.js 的計(jì)算屬性不是簡(jiǎn)單的 getter。計(jì)算屬性持續(xù)追蹤它的響應(yīng)依賴(lài)。在計(jì)算一個(gè)計(jì)算屬性時(shí)，Vue.js 更新它的依賴(lài)列表并緩存結(jié)果，只有當(dāng)其中一個(gè)依賴(lài)發(fā)生了變化，緩存的結(jié)果才無(wú)效。因此，只要依賴(lài)不發(fā)生變化，訪(fǎng)問(wèn)計(jì)算屬性會(huì)直接返回緩存的結(jié)果，而不是調(diào)用 getter。

為什么要緩存呢？假設(shè)我們有一個(gè)高耗計(jì)算屬性 A，它要遍歷一個(gè)巨型數(shù)組并做大量的計(jì)算。然后，可能有其它的計(jì)算屬性依賴(lài) A。如果沒(méi)有緩存，我們將調(diào)用 A 的 getter 許多次，超過(guò)必要次數(shù)。

由于計(jì)算屬性被緩存了，在訪(fǎng)問(wèn)它時(shí) getter 不總是被調(diào)用。考慮下例：

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

計(jì)算屬性 example 只有一個(gè)依賴(lài)：?vm.msg?。?Date.now()? 不是 響應(yīng)依賴(lài)，因?yàn)樗?Vue 的數(shù)據(jù)觀察系統(tǒng)無(wú)關(guān)。因而，在訪(fǎng)問(wèn) ?vm.example??時(shí)將發(fā)現(xiàn)時(shí)間戳不變，除非 ?vm.msg??變了。

有時(shí)希望 getter 不改變?cè)械男袨?#xff0c;每次訪(fǎng)問(wèn) ?vm.example??時(shí)都調(diào)用 getter。這時(shí)可以為指定的計(jì)算屬性關(guān)閉緩存：

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

現(xiàn)在每次訪(fǎng)問(wèn) ?vm.example??時(shí)，時(shí)間戳都是新的。但是，只是在 JavaScript 中訪(fǎng)問(wèn)是這樣的；數(shù)據(jù)綁定仍是依賴(lài)驅(qū)動(dòng)的。如果在模塊中這樣綁定計(jì)算屬性 ?{{example}}?，只有響應(yīng)依賴(lài)發(fā)生變化時(shí)才更新DOM。

組件系統(tǒng)

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

1.創(chuàng)建和注冊(cè)組件：

可以用 ?Vue.extend()??創(chuàng)建一個(gè)組件構(gòu)造器：

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

要把這個(gè)構(gòu)造器用作組件，需要用 ?Vue.component(tag, constructor)??注冊(cè)(這個(gè)注冊(cè)是全局的)：

//全局注冊(cè)組件，tag 為 my-component Vue.component('my-component', MyComponent)

組件在注冊(cè)之后，便可以在父實(shí)例的模塊中以自定義元素 ?<my-component>??的形式使用。要確保在初始化根實(shí)例之前注冊(cè)了組件：

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

最后渲染為：

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

當(dāng)然，可以讓組件只能用在其它組件內(nèi)，用實(shí)例選項(xiàng) components 注冊(cè)，比如：

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

這種局部注冊(cè)的方式也適用于其它資源，比如指令、過(guò)濾器和過(guò)渡。他們都支持全局和局部組件注冊(cè)。

前面提到組件是可以被復(fù)用的，多個(gè)實(shí)例可能會(huì)共享一個(gè)組件構(gòu)造器，那么請(qǐng)注意一個(gè)組件選項(xiàng)的問(wèn)題：

傳入 Vue 構(gòu)造器的多數(shù)選項(xiàng)也可以用在 ?Vue.extend()?中，不過(guò)有兩個(gè)特例： data 和 el。試想如果我們簡(jiǎn)單地把一個(gè)對(duì)象作為 data 選項(xiàng)傳給 ?Vue.extend()?：

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

這么做的問(wèn)題是 MyComponent 所有的實(shí)例將共享同一個(gè) data 對(duì)象！因?yàn)閷?duì)象是引用傳遞的，這基本不是我們想要的，因此我們應(yīng)當(dāng)使用一個(gè)函數(shù)作為 data 選項(xiàng)，讓這個(gè)函數(shù)返回一個(gè)新對(duì)象：

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

同理，el 選項(xiàng)用在 ?Vue.extend()?? 中時(shí)也須是一個(gè)函數(shù)。

?

?2.使用props傳遞數(shù)據(jù)

當(dāng)一個(gè)組件內(nèi)部還有一個(gè)子組件的時(shí)候，由于組件實(shí)例的作用域是孤立的，這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。這時(shí)，父組件可以使用props把數(shù)據(jù)傳給子組件：

“prop” 是組件數(shù)據(jù)的一個(gè)字段，期望從父組件傳下來(lái)。子組件需要顯式地用 props 選項(xiàng) 聲明 props：

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

然后向它傳入一個(gè)普通字符串：

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

子組件的渲染結(jié)果：

由于命名的習(xí)慣，請(qǐng)注意camelCase和kebab-case：HTML 特性不區(qū)分大小寫(xiě)。名字形式為 camelCase 的 prop 用作特性時(shí)，需要轉(zhuǎn)為 kebab-case(短橫線(xiàn)隔開(kāi))。

根據(jù)vue響應(yīng)的特性，props也可以是動(dòng)態(tài)的：

類(lèi)似于用 v-bind 綁定 HTML 特性到一個(gè)表達(dá)式，也可以用 ?v-bind??綁定動(dòng)態(tài) Props 到父組件的數(shù)據(jù)。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳導(dǎo)給子組件：

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

也可以使用v-bind的縮寫(xiě)語(yǔ)法來(lái)簡(jiǎn)化綁定：

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

渲染結(jié)果：

改變輸入框的值，子組件的文本會(huì)跟著改變

關(guān)于props的其他介紹，請(qǐng)參考 ：props

?

3.父子組件的通信

子組件可以用 ?this.$parent??訪(fǎng)問(wèn)它的父組件。根實(shí)例的后代可以用 this.$root 訪(fǎng)問(wèn)它。父組件有一個(gè)數(shù)組 ?this.$children?，包含它所有的子元素。

盡管可以訪(fǎng)問(wèn)父鏈上任意的實(shí)例，不過(guò)子組件應(yīng)當(dāng)避免直接依賴(lài)父組件的數(shù)據(jù)，盡量顯式地使用 props 傳遞數(shù)據(jù)。另外，在子組件中修改父組件的狀態(tài)是非常糟糕的做法，因?yàn)?#xff1a;

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

只看父組件，很難理解父組件的狀態(tài)。因?yàn)樗赡鼙蝗我庾咏M件修改！理想情況下，只有組件自己能修改它的狀態(tài)。

Vue 實(shí)例實(shí)現(xiàn)了一個(gè)自定義事件接口，用于在組件樹(shù)中通信。這個(gè)事件系統(tǒng)獨(dú)立于原生 DOM 事件，用法也不同。

每個(gè) Vue 實(shí)例都是一個(gè)事件觸發(fā)器：

• 使用??$on()??監(jiān)聽(tīng)事件；

• 使用??$emit()??在它上面觸發(fā)事件；

• 使用??$dispatch()??派發(fā)事件，事件沿著父鏈冒泡；

• 使用??$broadcast()??廣播事件，事件向下傳導(dǎo)給所有的后代。

不同于 DOM 事件，Vue 事件在冒泡過(guò)程中第一次觸發(fā)回調(diào)之后自動(dòng)停止冒泡，除非回調(diào)明確返回??true?。

一個(gè)簡(jiǎn)單的例子：

<!-- 子組件模板 --> <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>

在子組件的輸入框輸入值以后，點(diǎn)擊按鈕，父組件的Messages:[]文本會(huì)對(duì)應(yīng)變化

?

4.再來(lái)說(shuō)說(shuō)動(dòng)態(tài)組件

多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，然后動(dòng)態(tài)地在它們之間切換。使用保留的??<component>?元素，動(dòng)態(tài)地綁定到它的?is?特性：

new Vue({el : 'body',data : {currentView : 'home'},components : {home : { /* ... */ },posts : { /* ... */ },archive : { /* ... */ }} }) <component :is="currentView"><!-- 組件在 vm.currentview 變化時(shí)改變 --> </component>

如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。為此可以添加一個(gè)??keep-alive??指令參數(shù)：

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

其他動(dòng)態(tài)組件的詳細(xì)介紹，請(qǐng)參考：動(dòng)態(tài)組件

在創(chuàng)建復(fù)雜應(yīng)用的時(shí)候，動(dòng)態(tài)組件或許就顯得不那么靈活了，這時(shí)可以使用路由，vue-router路由擴(kuò)展可以看做是動(dòng)態(tài)組件的升級(jí)版，可參考：vue-router

?

5.最后，組件實(shí)例的生命周期：

Vue 實(shí)例在創(chuàng)建時(shí)有一系列初始化步驟——例如，它需要建立數(shù)據(jù)觀察，編譯模板，創(chuàng)建必要的數(shù)據(jù)綁定。在此過(guò)程中，它也將調(diào)用一些生命周期鉤子，給自定義邏輯提供運(yùn)行機(jī)會(huì)。例如 created 鉤子在實(shí)例創(chuàng)建后調(diào)用：

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

也有一些其它的鉤子，在實(shí)例生命周期的不同階段調(diào)用，如 compiled、 ready 、destroyed。鉤子的 this 指向調(diào)用它的 Vue 實(shí)例。一些用戶(hù)可能會(huì)問(wèn) Vue.js 是否有“控制器”的概念？答案是，沒(méi)有。組件的自定義邏輯可以分割在這些鉤子中。

聲明周期的圖示：

組件的簡(jiǎn)單介紹就到這里。

?

Vuex

在大型應(yīng)用中，狀態(tài)管理常常變得復(fù)雜，因?yàn)闋顟B(tài)分散在許多組件內(nèi)，在不同的作用域內(nèi)。以vue來(lái)說(shuō)，當(dāng)使用vue-router以及組件化開(kāi)發(fā)(.vue)來(lái)構(gòu)建大型單頁(yè)應(yīng)用的時(shí)候，組件之間狀態(tài)的數(shù)據(jù)的傳遞會(huì)很困難，雖然props、dispatch、broadcast等能夠進(jìn)行跨組件的數(shù)據(jù)傳遞，但是大量使用它們會(huì)使組件之間的耦合程度很高，組件越多，層級(jí)越多，維護(hù)起來(lái)就越復(fù)雜。怎么辦呢？能否在全局提供一個(gè)狀態(tài)管理構(gòu)架？

這里得提出一個(gè)概念：Flux

Flux是Facebook用來(lái)構(gòu)建用戶(hù)端的web應(yīng)用的應(yīng)用程序體系架構(gòu)。它通過(guò)利用數(shù)據(jù)的單向流動(dòng)為React的可復(fù)用的視圖組件提供了補(bǔ)充。相比于形式化的框架它更像是一個(gè)架構(gòu)思想，不需要太多新的代碼你就可以馬上使用Flux構(gòu)建你的應(yīng)用。

Flux應(yīng)用主要包括三部分：dispatcher、store和views（React components），千萬(wàn)不要和MVC(model-View-Controller)搞混。Controller在Flux應(yīng)用中也確實(shí)存在，但是是以controller-view的形式。view通常處于應(yīng)用的頂層，它從stores中獲取數(shù)據(jù)，同時(shí)將這些數(shù)據(jù)傳遞給它的后代節(jié)點(diǎn)。另外，action creators - dispatcher輔助方法 - 一個(gè)被用來(lái)提供描述應(yīng)用所有可能存在的改變的語(yǔ)義化的API。把它理解為Flux更新閉環(huán)的第四個(gè)組成部分可以幫助你更好的理解它。

一句話(huà)：Flux就是手動(dòng)將Action從數(shù)據(jù)流底層視圖中的事件手動(dòng)綁定到數(shù)據(jù)頂層的數(shù)據(jù)流架構(gòu)。

單向數(shù)據(jù)流的設(shè)計(jì)目的：任何UI不能直接對(duì)數(shù)據(jù)有寫(xiě)操作，就是防止同一份數(shù)據(jù)有多個(gè)地方同時(shí)在寫(xiě)。相對(duì)于直接進(jìn)行雙向綁定，編碼稍微會(huì)復(fù)雜一點(diǎn)，但換來(lái)了排錯(cuò)和維護(hù)的便捷。

?

Flux 架構(gòu)常用于 React 應(yīng)用中，但它的核心理念也可以適用于 Vue.js 應(yīng)用。比如 Vuex 就是一個(gè)借鑒于 Flux，但是專(zhuān)門(mén)為 Vue.js 所設(shè)計(jì)的狀態(tài)管理方案。React 生態(tài)圈中最流行的 Flux 實(shí)現(xiàn) Redux 也可以通過(guò)簡(jiǎn)單的綁定和 Vue 一起使用。

?

什么是Vuex

Vuex 是一個(gè)專(zhuān)門(mén)為 Vue.js 應(yīng)用所設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。它借鑒了 Flux 和 Redux 的設(shè)計(jì)思想，但簡(jiǎn)化了概念，并且采用了一種為能更好發(fā)揮 Vue.js 數(shù)據(jù)響應(yīng)機(jī)制而專(zhuān)門(mén)設(shè)計(jì)的實(shí)現(xiàn)。

為什么需要它？

當(dāng)你的應(yīng)用還很簡(jiǎn)單的時(shí)候，你多半并不需要 Vuex。也不建議過(guò)早地使用 Vuex。但如果你正在構(gòu)建一個(gè)中型以上規(guī)模的 SPA，你很有可能已經(jīng)需要思考應(yīng)該如何更好地歸納 Vue 之外，應(yīng)用的其他組成部分。這就是 Vuex 要大顯身手的時(shí)刻。

我們?cè)趩为?dú)使用 Vue.js 的時(shí)候，通常會(huì)把狀態(tài)儲(chǔ)存在組件的內(nèi)部。也就是說(shuō)，每一個(gè)組件都擁有當(dāng)前應(yīng)用狀態(tài)的一部分，整個(gè)應(yīng)用的狀態(tài)是分散在各個(gè)角落的。然而我們經(jīng)常會(huì)需要把狀態(tài)的一部分共享給多個(gè)組件。一個(gè)常見(jiàn)的解決策略為：使用定制的事件系統(tǒng)，讓一個(gè)組件把一些狀態(tài)“發(fā)送”到其他組件中。這種模式的問(wèn)題在于，大型組件樹(shù)中的事件流會(huì)很快變得非常繁雜，并且調(diào)試時(shí)很難去找出究竟哪錯(cuò)了。

為了更好的解決在大型應(yīng)用中狀態(tài)的共用問(wèn)題，我們需要對(duì)組件的 組件本地狀態(tài)(component local state) 和 應(yīng)用層級(jí)狀態(tài)(application level state) 進(jìn)行區(qū)分。應(yīng)用級(jí)的狀態(tài)不屬于任何特定的組件，但每一個(gè)組件仍然可以監(jiān)視(Observe)其變化從而響應(yīng)式地更新 DOM。通過(guò)匯總應(yīng)用的狀態(tài)管理于一處，我們就不必到處傳遞事件。因?yàn)槿魏螤砍兜揭粋€(gè)以上組件的邏輯，都應(yīng)該寫(xiě)在這里。此外，這樣做也能讓我們更容易地記錄并觀察狀態(tài)的變更（Mutation，原意為突變），甚至可以實(shí)現(xiàn)出華麗如時(shí)光旅行一般的調(diào)試效果。（譯注：是時(shí)候安利一波 vue-devtools 了）

Vuex 也對(duì)如何管理分撒各地的狀態(tài)增加了一些約束，但仍保留有足夠面對(duì)真實(shí)使用場(chǎng)景的靈活性。

一定需要它嗎？

Vuex有這么多好處，但這并不代表我們一定就要在項(xiàng)目中使用它。假如我們的項(xiàng)目是一個(gè)管理平臺(tái)系統(tǒng)，一般無(wú)非是列表跳轉(zhuǎn)詳情這種搭配，不同列表頁(yè)面、不同詳情頁(yè)面之間沒(méi)有什么相互關(guān)聯(lián)或者需要共享的狀態(tài)，也不會(huì)出現(xiàn)某一個(gè)需要獲取到所有詳情頁(yè)面的狀態(tài)這種需求。這時(shí)候我們是不需要Vuex的，使用它只會(huì)增加項(xiàng)目的復(fù)雜度。下面將介紹到的活動(dòng)發(fā)布系統(tǒng)，最后創(chuàng)建的時(shí)候需要獲取到所有組件的數(shù)據(jù)，這個(gè)時(shí)候使用Vuex顯得十分有必要。如果你都不知道是否需要Vuex，那就不用它。

最簡(jiǎn)單的store

創(chuàng)建 Vuex store 的過(guò)程相當(dāng)直截了當(dāng) - 只要提供一個(gè)初始化的 state 對(duì)象，以及一些 mutations：

import Vuex from 'vuex'const state = {count : 0 }const mutations = {INCREMENT (state){state.count ++} }export default new Vuex.Store({state,mutations })

現(xiàn)在，你可以通過(guò)??store.state???來(lái)讀取 state 對(duì)象，還可以通過(guò) dispatch 某 mutation 的名字來(lái)觸發(fā)這些狀態(tài)變更：

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

如果你傾向于對(duì)象風(fēng)格的分發(fā)方式，你可以用這種語(yǔ)法：

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

再次強(qiáng)調(diào)，我們通過(guò)分發(fā) mutation 的方式，而非直接改變??store.state?，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化。這個(gè)簡(jiǎn)單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時(shí)候能更容易地解讀應(yīng)用內(nèi)部的狀態(tài)改變。此外，這樣也讓我們有機(jī)會(huì)去實(shí)現(xiàn)一些能記錄每次狀態(tài)改變，保存狀態(tài)快照的調(diào)試工具。有了它，我們甚至可以實(shí)現(xiàn)如時(shí)間穿梭般的調(diào)試體驗(yàn)。

Vuex 使用 單一狀態(tài)樹(shù) —— 是的，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。至此它便作為一個(gè)『唯一數(shù)據(jù)源(SSOT)』而存在。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單狀態(tài)樹(shù)讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

以上只是一個(gè)用來(lái)展示 store 究竟是什么的一個(gè)極簡(jiǎn)例子。再談?wù)勅绾诵母拍?#xff1a;State（狀態(tài)），Mutations（變更） 和 Actions（動(dòng)作）。

State和Getters

1.安裝 Vuex 并且將您的根組件引入 store 實(shí)例：

import Vue from 'vue' import Vuex from 'vuex' import store from './store' import MyComponent from './MyComponent'// 關(guān)鍵點(diǎn)，教 Vue 組件如何處理與 Vuex 相關(guān)的選項(xiàng) Vue.use(Vuex)var app = new Vue({el : '#app',store, // 把 store 對(duì)象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件components : {MyComponent} })

通過(guò)在根實(shí)例中注冊(cè)?store?選項(xiàng)，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過(guò)??this.$store??訪(fǎng)問(wèn)到。不過(guò)事實(shí)上，我們幾乎不會(huì)需要直接引用它。

2.在子組件中，通過(guò)在 ?vuex.getters??選項(xiàng)里定義的?getter?方法來(lái)讀取狀態(tài)：

// MyComponent.jsexport default {template : '...',data (){ ... },// 此處為我們從 store 實(shí)例中取回狀態(tài)的位置vuex : {getters : {// 該 getter 函數(shù)將會(huì)把倉(cāng)庫(kù)的 `store.state.count` 綁定為組件的 `this.count`count : (state) => state.count}} }

請(qǐng)留意 vuex 的這個(gè)特殊選項(xiàng)（譯注：getters 子對(duì)象）。它是我們指定當(dāng)前組件能從 store 里獲取哪些狀態(tài)信息的地方。它的每個(gè)屬性名將對(duì)應(yīng)一個(gè) getter 函數(shù)。該函數(shù)僅接收 store 的整個(gè)狀態(tài)樹(shù)作為其唯一參數(shù)，之后既可以返回狀態(tài)樹(shù)的一部分，也可以返回從狀態(tài)樹(shù)中求取的計(jì)算值。而返回結(jié)果，則會(huì)依據(jù)這個(gè) getter 的屬性名添加到組件上，用法與組件自身的計(jì)算屬性一毛一樣。

組件不能直接修改store實(shí)例的狀態(tài)：

請(qǐng)始終記得非常重要的這點(diǎn)，就是：組件永遠(yuǎn)都不應(yīng)該直接改變 Vuex store 的狀態(tài)。因?yàn)槲覀兿胍尃顟B(tài)的每次改變都很明確且可追蹤，Vuex 狀態(tài)的所有改變都必須在 store 的 mutation handler (變更句柄) 中管理。為了強(qiáng)化該規(guī)則，在開(kāi)啟(嚴(yán)格模式(Strict Mode))時(shí)，若有 store 的狀態(tài)在 mutation 句柄外被修改，Vuex 就會(huì)報(bào)錯(cuò)。現(xiàn)在有了這一規(guī)則，我們 Vue 組件的職能就少了很多：他們通過(guò)只讀的 getter 與 Vuex store 的狀態(tài)相綁定，組件唯一能影響全局狀態(tài)的方法就是想辦法觸發(fā) mutations（我們接下來(lái)會(huì)談到）。若有必要，組件仍然能夠處理和操作本地狀態(tài)，但是我們不再在單獨(dú)的組件中放置任何數(shù)據(jù)請(qǐng)求或全局狀態(tài)變更的邏輯。這些操作全部都集中于 Vuex 相關(guān)的文件中，這樣能讓大型應(yīng)用變得更容易理解和維護(hù)。

?

Mutation

Mutations 本質(zhì)上是一個(gè)事件系統(tǒng)：每個(gè) mutation 都有一個(gè)?事件名 (name)?和 一個(gè)?回調(diào)函數(shù) (handler). 任何一個(gè) Mutation handler 的第一個(gè)參數(shù)永遠(yuǎn)為所屬 store 的整個(gè) state 對(duì)象：

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

用全部大寫(xiě)命名 mutation 是一個(gè)慣例，方便將它和 actions 區(qū)分開(kāi)。

你不能直接調(diào)用 mutation handler. 這里傳入 Store 構(gòu)造函數(shù)的選項(xiàng)更像是在注冊(cè)事件回調(diào)：當(dāng)INCREMENT?事件被觸發(fā)時(shí)，調(diào)用這個(gè) handler。觸發(fā) mutation handler 的方法是 dispatch 一個(gè) mutation 的事件名：

store.dispatch('INCREMENT')

Mutation必須是同步函數(shù)：

　　因?yàn)楫?dāng) mutation 觸發(fā)的時(shí)候，回掉函數(shù)還沒(méi)有被調(diào)用，我們不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用。任何在回調(diào)函數(shù)中進(jìn)行的的狀態(tài)的改變都是不可追蹤的。

Mutation必須遵守Vue的響應(yīng)系統(tǒng)規(guī)則：

　　1.盡可能在創(chuàng)建 store 時(shí)就初始化 state 所需要的所有屬性。

　　2.當(dāng)添加一個(gè)原本不存在的屬性時(shí)，需要使用??Vue.set(obj, 'newProp', 123)??或者拷貝并替換原本的對(duì)象。利用 stage 2 的語(yǔ)言特性 object spread syntax，我們可以使用這樣的語(yǔ)法: ??state.obj = {...state.obj, newProp : 123}?

Actions

Actions 是用于分發(fā) mutations 的函數(shù)。按照慣例，Vuex actions 的第一個(gè)參數(shù)是 store 實(shí)例，附加上可選的自定義參數(shù)。

// 最簡(jiǎn)單的 action function increment (store){store.dispatch('INCREMENT') }// 帶附加參數(shù)的 action // 使用 ES2015 參數(shù)解構(gòu) function incrementBy ({dispatch}, amount){dispatch('INCREMENT', amount) }

乍一眼看上去感覺(jué)多此一舉，我們直接分發(fā) mutations 豈不更方便？實(shí)際上并非如此，還記得?mutations 必須同步執(zhí)行這個(gè)限制么？Actions 就不受約束！我們可以在 action 內(nèi)部執(zhí)行異步操作，比如執(zhí)行一個(gè)ajax請(qǐng)求數(shù)據(jù)的操作：

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

我們可以這樣在組件中調(diào)用actions：

// 某組件內(nèi)部// 導(dǎo)入actions import {incrementBy} from './actions'const vm = new Vue({vuex : {getters : { ... }, // state gettersactions : {incrementBy}} })

上述代碼所做的就是把原生的 incrementBy action 綁定到組件的 store 實(shí)例中，暴露給組件一個(gè) ?vm.increamentBy ?實(shí)例方法。所有傳遞給??vm.increamentBy?的參數(shù)變量都會(huì)排列在 store 變量后面然后一起傳遞給原生的 action 函數(shù)，所以調(diào)用??vm.incrementBy(1)?等價(jià)于??incrementBy(vm.$store, 1)?。雖然多寫(xiě)了一些代碼，但是組件的模板中調(diào)用 action 更加省力了：

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

通常在大型 App 中，action 應(yīng)該按不同目的進(jìn)行 分組 / 模塊化 的管理，具體請(qǐng)參考：?Actions

?

下面再談?wù)勔粋€(gè)重要的東西，數(shù)據(jù)流：

為了更好地理解 Vuex app 中的數(shù)據(jù)流，我們來(lái)開(kāi)發(fā)一個(gè)簡(jiǎn)單的計(jì)數(shù)器 app。注意：這個(gè)例子僅僅是為了更好地解釋概念，在實(shí)際情況中并不需要在這種簡(jiǎn)單的場(chǎng)合使用 Vuex.

// store.js import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex)// 應(yīng)用初始狀態(tài) const state = {count : 0 }// 定義所需的 mutations const mutations = {INCREMENT (state){state.count ++},DECREMENT (state){state.count --} }// 創(chuàng)建 store 實(shí)例 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 實(shí)例一次即可 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}} })

你會(huì)注意到組件本身非常簡(jiǎn)單：它所做的僅僅是綁定到 state、然后在用戶(hù)輸入時(shí)調(diào)用 actions。

你也會(huì)發(fā)現(xiàn)整個(gè)應(yīng)用的數(shù)據(jù)流是單向的，正如 Flux 最初所定義的那樣：

1.用戶(hù)在組件中的輸入操作觸發(fā) action 調(diào)用。
2.Actions 通過(guò)分發(fā) mutations 來(lái)修改 store 實(shí)例的狀態(tài)。
3.Store 實(shí)例的狀態(tài)變化反過(guò)來(lái)又通過(guò) getters 被組件獲知。

最后：Vuex 并不強(qiáng)制要求所有的狀態(tài)都必須放在 Vuex store 中 ，如果有些狀態(tài)你覺(jué)得并沒(méi)有需要對(duì)其變化進(jìn)行追蹤，那么你完全可以把它放在 Vuex 外面(比如作為組件的本地狀態(tài))。比如公共組件對(duì)外的接口，通過(guò)props傳遞數(shù)據(jù)更為有效。

Vuex的完整介紹請(qǐng)參考：Vuex

?

vue-devtools

vue-devtools是chrome的一個(gè)vue開(kāi)發(fā)插件，可以在chrome商店下載crx擴(kuò)展包進(jìn)行安裝。提供Components和Vuex預(yù)覽(state變化跟蹤等)功能，有助于開(kāi)發(fā)和調(diào)試。

?

可以看到組件的prop屬性、計(jì)算屬性、vue getter屬性等，以及Vuex中的觸發(fā)的mutation、state 當(dāng)前的值等我們可能關(guān)注的內(nèi)容都直觀地展示了出來(lái)。

?

Vue模塊化?

?

對(duì)于大型項(xiàng)目，為了更好地管理代碼使用模塊構(gòu)建系統(tǒng)非常必要。推薦代碼使用 CommonJS 或 ES6 模塊，然后使用 Webpack 或 Browserify 打包。

Webpack 和 Browserify 不只是模塊打包器。兩者都提供了源碼轉(zhuǎn)換 API，通過(guò)它可以用其它預(yù)處理器轉(zhuǎn)換源碼。例如，借助 babel-loader 或 babelify 代碼可以使用 ES2015/2016 語(yǔ)法。

你可以使用 Webpack + vue-loader 或 Browserify + vueify 構(gòu)建這些單文件 Vue 組件。

選擇哪種構(gòu)建工具取決于你的經(jīng)驗(yàn)和需求。Webpack 的功能更強(qiáng)大，如代碼分割，將靜態(tài)資源當(dāng)作模塊，提取組件的 CSS 到單獨(dú)的一個(gè)文件等，不過(guò)它的配置相對(duì)復(fù)雜一點(diǎn)。如果你不需要 Webpack 的那些功能，使用 Browserify 更簡(jiǎn)單，最快的構(gòu)建方式是使用官方出品的腳手架工具 vue-cli。參考：vue-cli

?

?

活動(dòng)模板設(shè)計(jì)系統(tǒng)

這個(gè)設(shè)計(jì)系統(tǒng)只是對(duì)活動(dòng)模板要展示的內(nèi)容進(jìn)行設(shè)計(jì)，具體的樣式和交互由活動(dòng)h5頁(yè)面根據(jù)視覺(jué)和交互設(shè)計(jì)來(lái)定奪。活動(dòng)里面的每一個(gè)子項(xiàng)都可以抽象為一個(gè)組件，h5展示端拿到每個(gè)組件的內(nèi)容再套上對(duì)應(yīng)組件的樣式和交互邏輯，最終就形成了一個(gè)h5活動(dòng)頁(yè)面。

每一個(gè)活動(dòng)組件對(duì)應(yīng)三個(gè)模式組件：

　　1.標(biāo)簽組件，通過(guò)拖動(dòng)來(lái)創(chuàng)建對(duì)應(yīng)類(lèi)型的組件

? ? ? 2.預(yù)覽組件，展示當(dāng)前組件各項(xiàng)的內(nèi)容

? ? ? 3.編輯組件，用來(lái)編輯當(dāng)前選中的組件的各項(xiàng)內(nèi)容

完成后大概是這樣的，以一個(gè)最簡(jiǎn)單的節(jié)標(biāo)題組件為例：

?

如上圖所示：左側(cè)容器排列著這些常用組件的標(biāo)簽。將活動(dòng)需要的組件標(biāo)簽拖入預(yù)覽區(qū)域后，會(huì)生成對(duì)應(yīng)的預(yù)覽組件和編輯組件；點(diǎn)擊這個(gè)預(yù)覽組件，組件編輯區(qū)域會(huì)顯示對(duì)應(yīng)的編輯組件；在編輯組件中可以對(duì)組件各項(xiàng)進(jìn)行編輯。編輯完成后，通過(guò)事先的數(shù)據(jù)綁定，預(yù)覽區(qū)域?qū)?yīng)的組件就會(huì)更新視圖，顯示組件當(dāng)前的最新內(nèi)容。

以上就是這個(gè)系統(tǒng)的一個(gè)大概方案，下面談?wù)劸唧w的實(shí)現(xiàn)。

?

首先，從標(biāo)簽區(qū)域開(kāi)始：

標(biāo)簽組件是每個(gè)活動(dòng)組件的開(kāi)端，也就說(shuō)每一個(gè)標(biāo)簽組件必須有一個(gè)屬性來(lái)標(biāo)識(shí)它代表的是哪一個(gè)活動(dòng)組件。那就先給它們指定類(lèi)型 type：

　　節(jié)標(biāo)題??type ：'sectionTitle'?

　　投票 ?type ：'vote'

　　正文 ?type ：'content'?

　　用戶(hù) ?type ：'user'?

　　圖片 ?type ：'image'?

　　視頻 ?type ：'video'?

　　音頻 ?type ：'audio'?

　　跳轉(zhuǎn)鏈接 ?type ：'link'

然后每當(dāng)我們拖動(dòng)一個(gè)標(biāo)簽組件到預(yù)覽區(qū)域，再根據(jù)該標(biāo)簽組件的type生成對(duì)應(yīng)的預(yù)覽和編輯組件。預(yù)覽和編輯組件需要確定的無(wú)非就是有哪些編輯項(xiàng)，這些編輯項(xiàng)是什么內(nèi)容。以節(jié)標(biāo)題組件為例，它就只有一個(gè)編輯項(xiàng)：節(jié)標(biāo)題的文本。也就是說(shuō)節(jié)標(biāo)題的預(yù)覽組件用來(lái)顯示節(jié)標(biāo)題的文本，編輯組件需要有一個(gè)文本域來(lái)對(duì)節(jié)標(biāo)題文本進(jìn)行編輯，在模板事先綁定好對(duì)應(yīng)的數(shù)據(jù)，文本域的數(shù)據(jù)變化會(huì)反應(yīng)到預(yù)覽組件的DOM上。

我們需要有一個(gè)保存所有組件數(shù)據(jù)(對(duì)象)的容器，可以使用一個(gè)數(shù)組。

我更喜歡操作一個(gè)數(shù)組而不是對(duì)象的原因：vue對(duì)數(shù)組的基本方法(push、splice、shift等)都進(jìn)行了封裝，通過(guò)這些方法來(lái)改變數(shù)組的數(shù)據(jù)，結(jié)果都是響應(yīng)的。而在保持響應(yīng)的情況下，改變對(duì)象的數(shù)據(jù)要麻煩些，特別是復(fù)雜的嵌套對(duì)象。如果使用對(duì)象可以通過(guò)id直接匹配到對(duì)應(yīng)數(shù)據(jù)，通過(guò)數(shù)組需要遍歷一下。但是有了es6的for of，代碼還是很簡(jiǎn)單，而且也不是在操作DOM，性能影響不大。

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

每個(gè)組件數(shù)據(jù)對(duì)象的id屬性是唯一的，是拖入標(biāo)簽組件時(shí)生成的，這個(gè)id屬性是關(guān)聯(lián)預(yù)覽組件與對(duì)應(yīng)編輯組件的關(guān)鍵，通過(guò)它可以找到每個(gè)預(yù)覽組件對(duì)應(yīng)的編輯組件。為什么不通過(guò)type來(lái)判斷呢？因?yàn)槊總€(gè)活動(dòng)可能有多個(gè)相同的組件，比如節(jié)標(biāo)題。通過(guò)type沒(méi)法確定對(duì)應(yīng)關(guān)系。

這里我們通過(guò)Vuex創(chuàng)建一個(gè)store來(lái)存儲(chǔ)及修改這個(gè)數(shù)組(官方點(diǎn)的說(shuō)法就是管理state狀態(tài))。按照上面提到的Vuex的數(shù)據(jù)流規(guī)則：UI不允許直接修改數(shù)據(jù)。在編輯項(xiàng)里面改變某項(xiàng)輸入框的值，并不是直接改變了對(duì)應(yīng)組件數(shù)據(jù)中那一項(xiàng)的值，而是通過(guò)DOM事件觸發(fā)對(duì)應(yīng)的action，action再派發(fā)對(duì)應(yīng)的mutaion處理函數(shù)來(lái)修改state。這種方式可以確保所有對(duì)某項(xiàng)組件數(shù)據(jù)的修改都是通過(guò)觸發(fā)某一個(gè)公共的action來(lái)完成的，這個(gè)action就是進(jìn)行某項(xiàng)修改的統(tǒng)一和唯一的入口。

?

當(dāng)我們知道需要生成什么預(yù)覽和編輯組件的時(shí)候，并放進(jìn)組件數(shù)據(jù)容器的時(shí)候，我們就必須知道這個(gè)組件到底有哪些編輯項(xiàng)(除了組件類(lèi)型外，我們放入的這個(gè)組件數(shù)據(jù)對(duì)象還需要哪些屬性)，這時(shí)候我們就需要一個(gè)map，來(lái)管理組件type和組件編輯項(xiàng)的關(guān)系，以活動(dòng)的投票組件為例：

根據(jù)需求，投票組件需要有以下編輯項(xiàng)：

1.投票的標(biāo)題

2.投票項(xiàng)，每項(xiàng)要有一個(gè)名稱(chēng)，后續(xù)每項(xiàng)可能還會(huì)有其他屬性(類(lèi)似正確選項(xiàng)的標(biāo)記等)

//typeDataMap.jsexport default {vote : {type : "vote",title : "投票標(biāo)題文本",items : [{name : "投票項(xiàng)1"}, //每個(gè)投票項(xiàng){name : "投票項(xiàng)2"},{name : "投票項(xiàng)3"}]} }

只要知道是什么類(lèi)型，通過(guò)??typeData[type]??就能獲取到組件數(shù)據(jù)并存入組件數(shù)據(jù)容器了。由于我們?cè)陬A(yù)覽組件和編輯組件的模板視圖已事先對(duì)DOM進(jìn)行了數(shù)據(jù)綁定，當(dāng)我們改變組件容器中某個(gè)組件的數(shù)據(jù)項(xiàng)時(shí)，更新就會(huì)反應(yīng)到DOM上。當(dāng)我們保存整個(gè)模板的時(shí)候，只需要取出組件數(shù)據(jù)容器中的值就行了，其實(shí)也就是那個(gè)數(shù)組本身。H5展示端通過(guò)這個(gè)組件數(shù)據(jù)數(shù)組，可以拿到組件的數(shù)據(jù)以及排序，按照定好的模板渲染出來(lái)即可。當(dāng)然，像投票組件這類(lèi)有交互數(shù)據(jù)的組件，該系統(tǒng)設(shè)計(jì)的模板只是確定了要展示的固定的內(nèi)容。具體的投票總數(shù)、每項(xiàng)投票數(shù)等屬性需要后端處理后插入到對(duì)應(yīng)組件數(shù)據(jù)里面，供展示端顯示。

整個(gè)系統(tǒng)大概的設(shè)計(jì)思想就是這樣的，下面挑些具體的來(lái)講講：

?

標(biāo)簽組件

因?yàn)闃?biāo)簽組件的表現(xiàn)和交互邏輯等都是一致的，這里做了一個(gè)公共可復(fù)用的標(biāo)簽組件，對(duì)外接收兩個(gè)參數(shù)：title(標(biāo)簽文本)和type(標(biāo)簽類(lèi)型)。在標(biāo)簽容器組件創(chuàng)建一個(gè)包含所有標(biāo)簽組件數(shù)據(jù)對(duì)象的數(shù)組，在模板視圖中遍歷這個(gè)數(shù)組，就創(chuàng)建了所有的標(biāo)簽組件。

公共標(biāo)簽組件的統(tǒng)一的屬性和方法等存入了一個(gè)對(duì)象字面量里面，導(dǎo)入以后通過(guò)mixin方式混合，組件就會(huì)擁有這些屬性和方法。目前這樣做的意義不大，因?yàn)橐呀?jīng)有一個(gè)公共的標(biāo)簽組件了，mixin里面的東西完全可以直接寫(xiě)到這個(gè)公共組件內(nèi)。但如果每個(gè)類(lèi)型的標(biāo)簽組件都是一個(gè)單獨(dú)的.vue組件文件，mixin的好處就體現(xiàn)出來(lái)了：可復(fù)用、易維護(hù)。

具體實(shí)現(xiàn)的代碼，省略掉樣式

//labelWrapper.vue 標(biāo)簽組件容器(組件標(biāo)簽區(qū)域)<template><div class="label-wrapper"><div class="label-title">組件標(biāo)簽區(qū)域</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' //導(dǎo)入公共標(biāo)簽組件export default {name : "label_wrapper",components : {commonLabel //注冊(cè)為子組件(es6同名對(duì)象字面量縮寫(xiě))},data (){return {labelArr : [{title : "節(jié)標(biāo)題", type : "sectionTitle"},{title : "投票", type : "vote"},{title : "正文", type : "content"},{title : "用戶(hù)", type : "user"},{title : "圖片", type : "image"},{title : "視頻", type : "video"},{title : "音頻", type : "audio"},{title : "跳轉(zhuǎn)鏈接", type : "link"}]}}} </script><style lang="stylus">/*...*/ </style> //commonLabel.vue 公共標(biāo)簽組件<template><div class="label-item-wrapper" title="拖入模板設(shè)計(jì)區(qū)域" draggable="true" @dragstart="dragStart"><img class="label-icon" alt="{{title}}" :src="iconUrl"><span class="label-text">{{title}}</span></div> </template><script>//導(dǎo)入mixinimport 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.jsimport 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.dataTransferwidgetData['id'] = iddt.setData("id", id)dt.setData("type", this.type)dt.setData("widgetData", JSON.stringify(widgetData))}} }

?

預(yù)覽組件

預(yù)覽組件相對(duì)較簡(jiǎn)單，除了數(shù)據(jù)的綁定，就是拖動(dòng)排序。拖動(dòng)排序的實(shí)現(xiàn)是通過(guò)html5原生的drag事件，基于vue數(shù)據(jù)驅(qū)動(dòng)的原理，拖動(dòng)的時(shí)候并不需要去手動(dòng)改變預(yù)覽區(qū)域內(nèi)各組件的DOM順序，只需要改變組件數(shù)據(jù)數(shù)組里面各數(shù)據(jù)對(duì)象的index即可，數(shù)據(jù)的變化會(huì)反應(yīng)到DOM上。簡(jiǎn)單的節(jié)標(biāo)題預(yù)覽組件：

<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">- 節(jié)標(biāo)題 -</label><div class="preview-item-input-wrapper"><div class="title-text">{{text}}</div></div></div> </template><script>//導(dǎo)入actionimport {addPreviewAndData, deleteWidgetPreview, changeWidgetEdit, changPreviewAndDataIndex} from '../../../store/actions'//導(dǎo)入mixinimport 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* 預(yù)覽組件的mixin* @提取同類(lèi)組件之間可復(fù)用的計(jì)算屬性與方法*/export default {computed : {//該預(yù)覽組件是否為當(dāng)前點(diǎn)擊的isActive (){return this.id == this.currentEditWidgetId}},methods : {//刪除該預(yù)覽組件delMe (){this.deleteWidgetPreview(this.id)},//顯示該預(yù)覽組件對(duì)應(yīng)的編輯組件showEdit (){this.changeWidgetEdit(this.id)},//允許向該預(yù)覽組件拖放其他組件allowDrop (e){e.preventDefault();},//開(kāi)始拖放該預(yù)覽組件dragStart (e){var dt = e.dataTransferdt.setData("index", this.index)},//向該預(yù)覽組件拖放其他組件(預(yù)覽組件或者標(biāo)簽組件)dropIn (e){e.preventDefault()e.stopPropagation()var dt = e.dataTransfervar id = parseInt(dt.getData("id"))if (id){ //有id表明拖入的是標(biāo)簽組件var type = dt.getData("type")var widgetData = JSON.parse(dt.getData("widgetData"))this.changeWidgetEdit(id)this.addValidation(id) //添加組件驗(yàn)證項(xiàng)} else {var index = parseInt(dt.getData("index"))this.changPreviewAndDataIndex(index, this.index)}//清空dataTransferdt.clearData()}} }

?

編輯組件

還是以節(jié)標(biāo)題組件為例：

<template><div class="edit-item-wrapper"><label class="edit-item-label">節(jié)標(biāo)題文本</label><validator name="titleValidator"><div class="edit-item-input-wrapper"><textarea class="title-edit-input" placeholder="必填項(xiàng)，16字以?xún)?nèi)" v-model="text" v-validate:text="{required: {rule: true,message: '請(qǐng)?zhí)顚?xiě)節(jié)標(biāo)題文本'},maxlength: {rule: 16,message: '節(jié)標(biāo)題文本限制在16字以?xún)?nèi)'}}" @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>//導(dǎo)入actionimport {changeWidgetData, changeValidation} from '../../../store/actions'//導(dǎo)入mixinimport 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 (){ //驗(yàn)證通過(guò)this.isValid = truethis.changeValidation(this.id, true)},onInvalid (){ //驗(yàn)證失敗this.isValid = falsethis.changeValidation(this.id, false)}} } 還有一些公共組件以及store等就不再介紹了，前面的講解已基本包含，差不多就到這里了。最后完成后是這樣的：

?

活動(dòng)的展示端

在編輯完所有組件后，保存該活動(dòng)ID和一個(gè)包含所有組件數(shù)據(jù)對(duì)象的數(shù)組到server端數(shù)據(jù)庫(kù)中。我司的活動(dòng)是用H5做的，H5頁(yè)面按活動(dòng)ID到server獲取到該活動(dòng)的組件數(shù)據(jù)，按照數(shù)組中的順序和內(nèi)容依次渲染即可生成對(duì)應(yīng)的H5活動(dòng)頁(yè)面。當(dāng)然H5端也需要有一套組件化的實(shí)現(xiàn)方案，并與活動(dòng)發(fā)布端有統(tǒng)一的組件和相應(yīng)屬性的命名規(guī)范等。

本文由淺入深闡述了ES6和Vue相關(guān)的內(nèi)容和mvvm的思想。其中關(guān)于Vue API概述的內(nèi)容，大部分引用自Vue官方1.x中文文檔，非本人原創(chuàng)并翻譯 。

轉(zhuǎn)自：https://www.cnblogs.com/rock-roll/p/5692891.html

?

總結(jié)

以上是生活随笔為你收集整理的VUE.JS 组件化开发实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。