vue笔记整理与总结
Vue
一、 簡介：(為什么使用vue)
1、 與angular相比優(yōu)點(diǎn):
a) api簡單，快速上手，學(xué)習(xí)成本低；
b) Angular 使用雙向綁定，Vue 也支持雙向綁定，不過為單向數(shù)據(jù)流，數(shù)據(jù)從父組件單向傳給子組件；
c) Vue.js 中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中兩者有不少相混的地方
d) Angular的臟檢查機(jī)制，造成了如果項(xiàng)目龐大之后性能降低問題；每一次更新數(shù)據(jù)，都導(dǎo)致所有的數(shù)據(jù)綁定，進(jìn)行一次遍歷；
Vue的數(shù)據(jù)變化更新是根據(jù)依賴追蹤的觀察系統(tǒng)并且異步列隊(duì)去更新，數(shù)據(jù)變化都是獨(dú)立的觸發(fā)隊(duì)列中相應(yīng)的事件；
e) 渲染層創(chuàng)建了虛擬dom（輕量級，2.0），減少了內(nèi)存開銷和加快了渲染速度；
f) 組件式開發(fā)，每個(gè)組件都具有生命周期，便于自己狀態(tài)的維護(hù)；實(shí)現(xiàn)了代碼的高復(fù)用性；
2、 與react相比：
λ 共同點(diǎn)：
a) 使用 Virtual DOM
b) 提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件
c) 將注意力集中保持在核心庫，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫
λ 優(yōu)勢：
″ 性能：
a) vue的更新渲染過程是自動(dòng)追蹤的，而react如果想要提高更新的性能需要通過shouldComponentUpdate鉤子函數(shù)對數(shù)據(jù)進(jìn)行對比；
b) 對于組件的語法，在vue中既可以支持jsx語法，將css和html都寫入js文件中，又可以使用template模板進(jìn)行編譯，在vue中推薦使用template模板進(jìn)行編譯，減少學(xué)習(xí)成本，更加符合前端開發(fā)語法；而react僅僅支持jsx語法，jsx的優(yōu)點(diǎn)：一、開發(fā)工具對jsx的支持比其他的vue模板更先進(jìn)；
c) 對于css的支持：
vue中可以直接在style中寫css語法，可以支持媒體查詢，等等一切css屬性，并且可以通過scoped進(jìn)行組件作用域的封閉；
react的組件中如果進(jìn)行css樣式的隔離，只能寫入js文件中，比較簡單的樣式可以進(jìn)行支持，但是如果比較復(fù)雜的則無法支持；
″ 規(guī)模：
共同點(diǎn)：
都提供了路由和狀態(tài)管理機(jī)制；
都有自己的自動(dòng)化構(gòu)建工具；
不同點(diǎn)：
react的學(xué)習(xí)成本比較高，需要掌握jsx語法和es2015；雖然支持前端babel進(jìn)行編譯，但是不適合生產(chǎn)環(huán)境；
vue向下擴(kuò)展可以像jq那樣使用在前端項(xiàng)目中，向上擴(kuò)展可以像react一樣進(jìn)行前端的自動(dòng)化構(gòu)建；
″ 本地渲染：(跨平臺(tái))
reactNative
weex
3、 總結(jié)vue：
優(yōu)點(diǎn)：
a) MVVM的開發(fā)模式，從dom中解脫出來，雙向數(shù)據(jù)綁定；
b) 數(shù)據(jù)更新采用異步事件機(jī)制；
c) 采用單向數(shù)據(jù)流；
d) 組件式開發(fā)；
e) 采用虛擬dom
f) 支持模板和jsx兩種開發(fā)模式；
g) 可以進(jìn)行服務(wù)端渲染；
h) 擴(kuò)展性強(qiáng)，既可以向上又可以向下擴(kuò)展
缺點(diǎn)：
a) 不兼容IE8以下版本
b) 生態(tài)圈不繁榮，開源社區(qū)不活躍；
二、 安裝與使用：
1、 直接使用CDN引入：
<script src="https://unpkg.com/vue"></script>
2、 下載到本地：
https://vuejs.org/js/vue.js3、 自動(dòng)化構(gòu)建工具：
Vue.js 有一款官方的腳手架生成工具 vue-cli:
λ 全局安裝
npm install –g vue-cli
λ 創(chuàng)建項(xiàng)目
vue init webpack myproject
λ 安裝依賴包
npm install
λ 目錄如下：
build: 用于存放 webpack 相關(guān)配置和腳本。
config: 主要存放配置文件，用于區(qū)分開發(fā)環(huán)境、測試環(huán)境、線上環(huán)境的不同。
src: 項(xiàng)目源碼及需要引用的資源文件。
static: 不需要 webpack 處理的靜態(tài)資源。
test: 用于存放測試文件；
λ 啟動(dòng)服務(wù)：
正常開發(fā)時(shí)，就會(huì)運(yùn)行命令npm run dev，啟動(dòng)一個(gè)小型的express 服務(wù)。在這個(gè) express 服務(wù)中，會(huì)使用webpack-dev-middleware 和 webpack-hot-middleware 這兩個(gè) 中間件，來進(jìn)行項(xiàng)目的熱部署，即每次修改 src 中的文件后，不需要再按瀏覽器的刷新來更新 代碼，啟動(dòng)的 server 服務(wù)會(huì)自動(dòng)監(jiān)聽文件的變化并編譯，通知瀏覽器自動(dòng)刷新。
λ 分析packjson文件：
dev:為本地開發(fā)的啟動(dòng)項(xiàng)；
start：和dev一樣；
build:打包線上部署代碼
e2e:這個(gè)代表端對端測試，確切的來說就是前端的一個(gè)自動(dòng)化測試；這里使用的是java的nightwatch自動(dòng)化測試工具，使用測試需要進(jìn)行java的全局安裝
三、 實(shí)例：
1、一個(gè) Vue 實(shí)例其實(shí)正是一個(gè) MVVM 模式中所描述的 ViewModel - 因此在文檔中經(jīng)常會(huì)使用 vm 這個(gè)變量名。
2、在實(shí)例化 Vue 時(shí)，需要傳入一個(gè)選項(xiàng)對象，它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng) ；
(1)模板：
(2)數(shù)據(jù)：
可以對外部數(shù)據(jù)進(jìn)行代理，外部傳入的數(shù)據(jù)如果為對象，對此數(shù)據(jù)進(jìn)行的淺拷貝，此時(shí)我們成為數(shù)據(jù)的響應(yīng)式；對于初始化后，進(jìn)行的數(shù)據(jù)添加無效，要想對于初始后添加的數(shù)據(jù)生效，需要使用$set(),不過不推薦這么，盡量在數(shù)據(jù)初始化時(shí)，就對所有需要的數(shù)據(jù)進(jìn)行添加，可以用undefined和null進(jìn)行占位；$watch方法對于實(shí)例對象的數(shù)據(jù)進(jìn)行監(jiān)聽，并在回掉中接受舊數(shù)據(jù)和新數(shù)據(jù)；(3)方法：
Methods對象來定義方法，并且使用v-on指令來監(jiān)聽DOM事件；自定義事件：$emit、$on、($broadcast、$dispatch在2.0中已經(jīng)刪除)(4)生命周期：
在vue實(shí)例創(chuàng)建時(shí)一系列的初始化步驟：beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 、beforeUpdate、updated、activated、deactivated (5)數(shù)據(jù)綁定：傳統(tǒng)的web項(xiàng)目，往往是通過后端模板引擎來進(jìn)行數(shù)據(jù)和視圖的渲染，例如：php的smarty、java的velocity、node的express、也就是傳統(tǒng)的服務(wù)端渲染，導(dǎo)致前后端語言混雜在一起，造成渲染后期進(jìn)行視圖更改是，只能通過dom；a、文本插值使用{{}}大括號，單次賦值：{{*}} (2.0中使用v-once=””) b、 屬性插值{{}} (2.0 v-bind:id=””)c、表達(dá)式{{}} （6）指令：a、參數(shù)：v-bind:src=”attr”，給屬性綁定值；
或者可以這樣寫：src=”{{attr}}”
或者可以這樣寫 :src=“attr”
四、 計(jì)算屬性：
####三種對于數(shù)據(jù)變化監(jiān)聽機(jī)制：
1、 computed：一個(gè)屬性依賴于多個(gè)屬性時(shí)，推薦使用
2、 watch()：多個(gè)屬性依賴一個(gè)屬性是，推薦使用
3、 Set、get：set對一個(gè)屬性設(shè)置值時(shí)，會(huì)自動(dòng)的調(diào)用相應(yīng)的回掉函數(shù)，get的回調(diào)函數(shù)會(huì)根據(jù)，函數(shù)內(nèi)部依賴的屬性的改變而自動(dòng)改變
五、 條件渲染：
1、 v-if
2、 template v-if
如果在一個(gè)判斷中要對多個(gè)元素進(jìn)行渲染，則需要配合template標(biāo)簽；
3、 v-else
4、 v-else-if
多次進(jìn)行鏈?zhǔn)降氖褂?/p>
5、 key管理可復(fù)用的元素：
Vue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開始渲染
在這里用key進(jìn)行元素的唯一標(biāo)識(shí)賦值，降低元素的復(fù)用性；
6、 v-if與v-show
v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建
v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷
7、 v-if與v-for一起使用
當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級；如果想讓v-if優(yōu)先級更高，則需要在外套一層標(biāo)簽；進(jìn)行v-if的渲染
六、 列表渲染：
A、數(shù)組：
1、 常用寫法：
v-for=”item in items”
v-for=”(item,index) in items”
2、 結(jié)合template使用：
帶有 v-for 的 <template> 標(biāo)簽來渲染多個(gè)元素塊
B、對象：
1、 常用寫法：
v-for="value in object"
v-for="(value, key) in object"
v-for="(value, key, index) in object"
C、整數(shù)迭代：
1、 常用寫法：
v-for="n in 10"
D、組件：
1、 常用寫法：
<my-component v-for="item in items" :key="item.id"></my-component>
E、key：
當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略，默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài)。為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。
注：如果加key值，列表重新渲染的元素，是從key變化的第一個(gè)元素起到key值變化的最后一個(gè)元素結(jié)束，中間所有的元素都是重新渲染，不管中間元素的key值變化與否；
F、變異方法，觸發(fā)視圖更新：
Push、pop、shift、unshift、splice、sort、reverseG、重塑數(shù)組、顯示過濾/排序結(jié)果
對于非變異的數(shù)組方法，在操作數(shù)組時(shí)，一般是采用重新賦值的方式，操作做完原數(shù)組，再將結(jié)果賦給原屬性；如：filter、concat、slice
evenNumbers: function () {return this.numbers.filter(function (number) {return number % 2 === 0}) }七、 方法與事件：
1、 方法處理器：
v-on 指令監(jiān)聽 DOM 事件
2、 內(nèi)聯(lián)語句處理器：
方法的調(diào)用方式，可以直接出入?yún)?shù)，或$event當(dāng)前事件傳入
3、 事件修飾符：
.stop:等同于調(diào)用event.stopPropagetion()
.prevent:等同于調(diào)用event.preventDefault()
.capture:使用capture模式添加事件監(jiān)聽器，使用事件捕獲模式
.self:只當(dāng)事件是從監(jiān)聽元素本身時(shí)才會(huì)觸發(fā)回調(diào)；
.once:事件將只會(huì)觸發(fā)一次；
4、 按鍵修飾符：
KeyCode: （鍵值）
<input v-on:keyup.13="submit">
按鍵別名：
enter、tab、delete、esc、space、up、down、left、right
八、 表單控件綁定：
1、 v-model 會(huì)忽略所有表單元素的 value、checked、selected 特性的初始值。
2、 text、textarea
3、 復(fù)選框：
單選：（值為true/false）
<input type="checkbox" id="checkbox" v-model="checked">
多選：（值為數(shù)組格式，數(shù)組中每一項(xiàng)為input的value值）
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
4、 單選按鈕
值為字符串，當(dāng)前選中元素的value值；
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">
5、 選擇列表
單選列表：（值為字符串）
<select v-model="selected">
</select>
注：如果 v-model 表達(dá)初始的值不匹配任何的選項(xiàng)，<select> 元素就會(huì)以”未選中”的狀態(tài)渲染。在 iOS 中，這會(huì)使用戶無法選擇第一個(gè)選項(xiàng)，因?yàn)檫@樣的情況下，iOS 不會(huì)引發(fā) change 事件。因此，像以上提供 disabled 選項(xiàng)是建議的做法
多選列表：
a) 值為一個(gè)數(shù)組格式
b) 多選時(shí)，需要ctrl配合
c) 無實(shí)際意義
d) 比單選列表多一個(gè)multiple屬性
<select v-model="selected" multiple style="width: 50px">
</select>
6、 綁定value：
（當(dāng)單選或復(fù)選框選中時(shí)，此時(shí)的model值一般為boolen值，但是根據(jù)業(yè)務(wù)需求，有時(shí)我們需要?jiǎng)討B(tài)綁定值，用法如下）
a) 復(fù)選框：
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
// 當(dāng)選中時(shí)
vm.toggle === vm.a
// 當(dāng)沒有選中時(shí)
vm.toggle === vm.b
b) 單選框：
<input type="radio" v-model="pick" v-bind:value="a">
// 當(dāng)選中時(shí)
vm.pick === vm.a
7、 修飾符
lazy：在 change 事件中同步
number：自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型
trim：自動(dòng)過濾用戶輸入的首尾空格
九、 過渡：
通過 Vue.js 的過渡系統(tǒng)，可以在元素從 DOM 中插入或移除時(shí)自動(dòng)應(yīng)用過渡效果。Vue.js 會(huì)在適當(dāng)?shù)臅r(shí)機(jī)為你觸發(fā) CSS 過渡或動(dòng)畫，你也可以提供相應(yīng)JavaScript 鉤子函數(shù)在過渡過程中執(zhí)行自定義的 DOM 操作。
1、 經(jīng)常使用工具：
在 CSS 過渡和動(dòng)畫中自動(dòng)應(yīng)用 class
可以配合使用第三方 CSS 動(dòng)畫庫，如 Animate.css
在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動(dòng)畫庫，如 Velocity.js
2、 Vue 提供了 transition 的封裝組件，與下面情況一起使用：
v-if
v-show
動(dòng)態(tài)組件 （介紹見組件）
在組件的根節(jié)點(diǎn)上，并且被 Vue 實(shí)例 DOM 方法（如 vm.$appendTo(el)）觸發(fā)。
3、 vue對transition組件的處理方式：
a) 自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過渡或動(dòng)畫，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名。
b) 如果過渡組件提供了 JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用
c) 如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動(dòng)畫，DOM 操作（插入/刪除）在下一幀中立即執(zhí)行。
4、 類名的添加和切換取決于 transition 特性的值。比如 <transition name="fade">，會(huì)有六個(gè) CSS 類名：
A. 當(dāng)dom插入時(shí)：
1) fade-enter: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時(shí)生效，在下一個(gè)幀移除
2) fade-enter-active: 定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用，在元素被插入時(shí)生效，在 transition/animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間，延遲和曲線函數(shù)。
3) fade-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入一幀后生效（于此同時(shí) v-enter 被刪除），在 transition/animation 完成之后移除。
B. 當(dāng)dom移除時(shí)：
1) fade-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效，在下一個(gè)幀移除。
2) fade-leave-active: 定義過渡的狀態(tài)。在元素整個(gè)過渡過程中作用，在離開過渡被觸發(fā)后立即生效，在 transition/animation 完成之后移除。 這個(gè)類可以被用來定義過渡的過程時(shí)間，延遲和曲線函數(shù)。
3) fade-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)一幀后生效（于此同時(shí) v-leave 被刪除），在 transition/animation 完成之后移除。
注：如果一個(gè)動(dòng)畫在dom插入和刪除時(shí)執(zhí)行的效果正好相反，則只需要將v-enter和v-leave-to的樣式設(shè)置成一樣就可以；不需要對v-enter-to和v-leave進(jìn)行設(shè)置，對于v-enter-active和v-leave-active可以進(jìn)行相應(yīng)的過渡時(shí)間和過渡曲線的設(shè)置；
5、 通過css的animation屬性來實(shí)現(xiàn)過渡的效果:
CSS 動(dòng)畫用法同 CSS 過渡，區(qū)別是在動(dòng)畫中 v-enter 類名在節(jié)點(diǎn)插入 DOM 后不會(huì)立即刪除，而是在 animationend 事件觸發(fā)時(shí)刪除；
注：對于animation的使用，可以直接在定義一個(gè)動(dòng)畫，然后再v-enter-active和v-leave-active中用animation屬性定義動(dòng)畫的曲線和時(shí)間即可；
6、 自定義過渡類名結(jié)合第三方動(dòng)畫庫如Animate.css：
http://cdn.bootcss.com/animat...
自定義的類名屬性有：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
注：他們的優(yōu)先級高于普通的類名；
使用方法：
將上述屬性添加到transition元素上，屬性值為第三方庫的動(dòng)畫名，可以不書寫name屬性定義的過渡名稱，一般只使用enter-active-class和leave-active-class就可以滿足需求書寫方式：
注：屬性值中一定要加入animated屬性值，否則不生效；
如：
enter-active-class="animated bounce"
7、 css樣式中與第三方動(dòng)畫庫的結(jié)合：
將動(dòng)畫定義到v-enter-active和v-leave-active類名上：
如：
8、 同時(shí)使用transitions和animations時(shí)顯示的聲明過渡類型
Vue 為了知道過渡的完成，dom要顯示原有的樣式，必須設(shè)置相應(yīng)的事件監(jiān)聽器，它可以是 transitionend 或 animationend ，這取決于給元素應(yīng)用的 CSS 規(guī)則。如果你使用其中任何一種，Vue 能自動(dòng)識(shí)別類型并設(shè)置監(jiān)聽。
有時(shí)候同時(shí)使用transition 和animation ，而執(zhí)行完畢的時(shí)間不統(tǒng)一，會(huì)造成后者無法將動(dòng)畫執(zhí)行完畢，此時(shí)可以用type屬性在transition元素上進(jìn)行相應(yīng)的設(shè)置需要 Vue 監(jiān)聽的類型，屬性值為transition 或animation
9、 顯示定義過渡效果的持續(xù)時(shí)間
應(yīng)用場景：
Vue 會(huì)等待其在過渡效果的根元素第一個(gè) transitionend 或 animationend 事件觸發(fā)后，結(jié)束過渡效果；一些嵌套的內(nèi)部元素相比于過渡效果的根元素有延遲的或更長的過渡效果。
使用方式：
<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
10、 js中的鉤子函數(shù)
beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave、leaveCancelled
結(jié)合第三方j(luò)s動(dòng)畫庫：<script src="https://cdnjs.cloudflare.com/...;></script>
動(dòng)畫的書寫格式：
Velocity的參數(shù)：第一個(gè)為動(dòng)畫掛載的元素，第二個(gè)為定義的動(dòng)畫css樣式，第三個(gè)參數(shù)為動(dòng)畫的時(shí)間或者回調(diào)函數(shù)
如：
Velocity（el,{fontSize:’1.5em’},{duration:300,complete:done}）
常用鉤子函數(shù)為：beforeEnter 、enter、beforeLeave 、leave分別定義，元素進(jìn)入時(shí)的動(dòng)畫和元素離開時(shí)的動(dòng)畫；
beforeEnter:定義元素進(jìn)入時(shí)的初始樣式；
enter：定義元素進(jìn)入過程的動(dòng)畫樣式(一般第三方庫的動(dòng)畫使用在此鉤子中)
beforeLeave：定義元素離開是的初始樣式；
leave：定義元素離開過程的動(dòng)畫樣式（一般第三方庫的動(dòng)畫使用在此鉤子中）
注：一定注意在enter、leave鉤子中一定使用done的方法的調(diào)用，否則動(dòng)畫將無效；
11、 初始渲染的過渡;
通過appear屬性的添加實(shí)現(xiàn)初始渲染的過渡
12、 在一個(gè)transition元素中對多個(gè)標(biāo)簽動(dòng)畫的實(shí)現(xiàn):
需要給每一個(gè)元素添加一個(gè)key標(biāo)簽，防止元素的復(fù)用(不產(chǎn)生任何動(dòng)畫)
過渡模式：
場景：在兩個(gè)元素的切換過程中，進(jìn)入元素和離開元素的過渡同時(shí)進(jìn)行，將會(huì)導(dǎo)致效果偏差；
解決：
可以在過渡的標(biāo)簽上添加過渡模式：（mode）
in-out: 新元素先進(jìn)行過渡，完成之后當(dāng)前元素過渡離開。(一般不用)
out-in: 當(dāng)前元素先進(jìn)行過渡，完成之后新元素過渡進(jìn)入。
13、 多個(gè)組件的過渡
一般使用動(dòng)態(tài)組件的方式實(shí)現(xiàn)不同組件間的切換，然后在切換過程中實(shí)現(xiàn)過渡效果；
注：動(dòng)態(tài)組件的切換不存在標(biāo)簽的復(fù)用問題
14、 列表過渡：
1) 列表的進(jìn)入和離開過渡
使用transition-group組件，不同于transition組件，會(huì)以一個(gè)真實(shí)元素呈現(xiàn)，默認(rèn)為span元素，也可以通過tag特性更換為其他元素；
內(nèi)部元素必須提供唯一的key值
2) 列表的位移過渡
v-move特性可以在元素的改變定位的過程中應(yīng)用，可以通過name屬性自定義前綴，也可以通過move-class手動(dòng)設(shè)置
十、 組件
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。
(一) 組件注冊：
組件構(gòu)造器：Vue.extend({ })，2.0中可以不使用構(gòu)造器進(jìn)行構(gòu)造，直接寫入對象；
規(guī)則：對于自定義標(biāo)簽名，Vue.js 不強(qiáng)制要求遵循 W3C 規(guī)則 (小寫，并且包含一個(gè)短杠)，盡管遵循這個(gè)規(guī)則比較好
1、 全局注冊：
全局注冊需要在根實(shí)例初始化前注冊，這樣才能使組件在任意實(shí)例中被使用，方式：Vue.component(“組件名”,組件)
2、 局部注冊：
組件只能在被注冊的組件中使用，而無法在其他組件中使用.
3、 注冊語法糖：
全局注冊和局部注冊(使用components屬性，值為對象，組件名和組件定義對象是鍵值對的關(guān)系)；
(二) 組件選項(xiàng)：
1、 template：注意分析模板，is使用；
2、 el和data兩個(gè)屬性，不可以直接賦值，比如data如果直接賦值，組件使用多次的時(shí)候，多個(gè)組件將公用一個(gè)對象；如果一個(gè)改變，則所有都會(huì)改變；所以使用function方式，每次return出一個(gè)新的對象；el類似；由于el很少直接在組件中掛載，所以可以忽略；
3、 props：
組件間的作用域是孤立的，這里跟angular的指令作用域有所不同，angular指令的默認(rèn)作用域是公用的，不管是在子指令還是父指令中定義的；在vue中，props起到了父組件向下與子組件間的橋梁作用；子組件給父組件發(fā)送消息，需要events；
ν 駝峰命名：html的屬性不區(qū)分大小寫；
ν 動(dòng)態(tài)props：
通過v-bind進(jìn)行綁定；
如果要進(jìn)行數(shù)值的傳遞，必須通過動(dòng)態(tài)綁定，否則直接傳遞過去的是個(gè)字符串；
ν props的接受：
在子組件中使用props屬性進(jìn)行接受，props的值可以為數(shù)組（不可做校驗(yàn)），可以為對象（可以做校驗(yàn)）
ν props數(shù)據(jù)的處理：
不應(yīng)該在子組件中進(jìn)行prop值的改變，因?yàn)閜rop的值是隨父組件進(jìn)行更變，如果在組件中直接對prop進(jìn)行改變，vue則會(huì)拋出警告
正確的處理方式：
a) 定義一個(gè)局部變量，并用 prop 的值初始化它：（只會(huì)在初始化時(shí)，進(jìn)行一次賦值，后期不會(huì)動(dòng)態(tài)改變）
props: ['initialCounter'],
b) 定義一個(gè)計(jì)算屬性，處理prop的值并返回：（進(jìn)行屬性值的動(dòng)態(tài)跟蹤）
props: ['size'],
ν 綁定類型：
1) 默認(rèn)時(shí)一直跟隨父組件值得變化而變化，
2) .sync:雙向綁定（取消）；在2.3.0以后,再次以事件監(jiān)聽實(shí)現(xiàn)雙向數(shù)據(jù)流；如：
父組件：
<comp :foo="bar" @updata="val => bar = val"></comp>
子組件：
this.$emit('update:foo', newValue)
3) .once:單次綁定，子組件接受一次父組件傳遞的數(shù)據(jù)后，單獨(dú)對這份數(shù)據(jù)進(jìn)行維護(hù)；（2.0版本后取消此修飾符）
注：如果prop傳遞的是一個(gè)引用類型的數(shù)據(jù)，如對象或數(shù)組，即使單向綁定，子組件也會(huì)影響父組件；（傳遞為單向傳遞）
ν Props驗(yàn)證：
1) 基礎(chǔ)類型檢測：prop：Number，接受的參數(shù)為原生的構(gòu)造器：String、Number、Boolen、Function、Object、Aarry、Symbol、Null（意味著任何類型都行）
2) 可以為多種類型：props：[Number，String]
3) 參數(shù)必須：props:{type:Number,required:true} 對象的寫法
4) 參數(shù)默認(rèn)：props {type:Number,default:0} 對象的寫法
5) 綁定類型：props：{twoWay:true} 校驗(yàn)數(shù)據(jù)綁定類型，如果非雙向綁定會(huì)拋出一條警告；（這個(gè)不用了）
6) 自定義驗(yàn)證函數(shù)：props：{validator：function(val){ return val>1},這樣就可以驗(yàn)證一個(gè)數(shù)值是否大于1；
(三) 非Prop屬性：
1、 在組件上使用自定義屬性，如果不在子組件中使用props進(jìn)行接受，則此屬性會(huì)被默認(rèn)添加到組件的根元素上；
2、 在組件上使用html元素已有的屬性，如class、style等，則組件上的屬性值，會(huì)和組件的根節(jié)點(diǎn)的相應(yīng)屬性值進(jìn)行合并等特性；如type等屬性值，會(huì)進(jìn)行覆蓋或替換；如：組件中的input的type為number，使用組件時(shí)傳入的type值為text，則組件內(nèi)部的input的type值將被替換為text；
(四) 組件間通信:
1、 直接訪問：
1)?父組件實(shí)例children：包含所有子組件實(shí)例
3)?：組件所在的根實(shí)例；這三個(gè)屬性都掛載在組件的上，不推薦這樣做，會(huì)造成父子組件間的強(qiáng)耦合；、自定義事件監(jiān)聽：組件實(shí)例化時(shí)，在組件的標(biāo)簽上使用進(jìn)行事件的監(jiān)聽；、自定義事件觸發(fā)機(jī)制：emit:在實(shí)例本身上觸發(fā)事件在子組件的鉤子函數(shù)中去觸發(fā)事件；
4、 子組件索引：
通過ref指令，綁定一個(gè)子組件，可以在父組件中使用this.$refs.屬性名 的方式獲取子組件；
5、 非父子通信：
思想：建立一個(gè)空的vue實(shí)例作為中央事件總線，即全局的vue實(shí)例；
代碼如下：
(五) 內(nèi)容分發(fā)：
1、 基礎(chǔ)用法：
提供一種混合父組件內(nèi)容與子組件自己模板的方式叫做內(nèi)容分發(fā)；
Slot標(biāo)簽；
2、 使用需求：
當(dāng)子組件中的dom結(jié)構(gòu)以及展示的內(nèi)容由父組件決定時(shí)
3、 編譯作用域：
如果在子組件的模板中使用{{}}解析數(shù)據(jù)，則模板會(huì)解析自己作用域中的數(shù)據(jù)，而不是解析父組件作用中的數(shù)據(jù)；
4、 默認(rèn)slot：
<slot>標(biāo)簽允許有一個(gè)匿名slot，不需要name值，作為找不到匹配的內(nèi)容片段的回退插槽，如果沒有默認(rèn)的slot，這些找不到匹配的內(nèi)容片段將被忽略；
5、 作用域插槽：
在父組件的slot模板中使用子組件中數(shù)據(jù)；如：
在父級中，具有特殊屬性 scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。scope 的值對應(yīng)一個(gè)臨時(shí)變量名，此變量接收從子組件中傳遞的 props 對象；
在slot中可以動(dòng)態(tài)綁定屬性值，綁定的屬性需要在父組件的scope中進(jìn)行顯示聲明；
(六) 動(dòng)態(tài)組件：
1、基礎(chǔ)用法：
component 標(biāo)簽上 is 屬性決定了當(dāng)前采用的子組件，:is 是 v-bind:is 的縮寫，綁定了父 組件中 data 的 currentView 屬性。頂部的 ul 則起到導(dǎo)航的作用，點(diǎn)擊即可修改 currentView 值，也就修改 component 標(biāo)簽中使用的子組件類型，需要注意的事，currentView 的值需要 和父組件實(shí)例中的 components 屬性的 key 相對應(yīng)。（起到路由的作用）
2、keep-alive
在component 標(biāo)簽外層包裹一個(gè) keep-alive 標(biāo)簽，可以將切換出去的組件保留在內(nèi)存中，避免重新 渲染。
(七) 雜項(xiàng)：
1、 異步組件：
局部定義組件寫法：
2、 當(dāng)注冊組件 (或者 props) 時(shí)，可以使用 kebab-case，camelCase，或 PascalCase。但是使用組件時(shí)只能用kebab-case這種寫法；html不識(shí)別大小寫；
3、 當(dāng)組件中包含大量靜態(tài)內(nèi)容時(shí)，可以考慮使用 v-once 將渲染結(jié)果緩存起來
4、 X-Templates
另一種定義模版的方式是在 JavaScript 標(biāo)簽里使用 text/x-template 類型
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
十一、 指令
1、 內(nèi)置指令：
1) V-bind
2) V-model
3) V-if/ v-else-if/v-else/v-show
4) V-for
5) V-on
6) V-text
7) V-html
8) v-pre 指令相對簡單，就是跳過編譯這個(gè)元素和子元素，顯示原始的 {{}}Mustache 標(biāo) 簽，用來減少編譯時(shí)間。
9) v-cloak 指令相當(dāng)于在元素上添加了一個(gè) [v-cloak] 的屬性，直到關(guān)聯(lián)的實(shí)例結(jié)束編譯。 官方推薦可以和 css 規(guī)則 [v-cloak]{ display :none } 一起使用，可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢
10) v-once 指令是 Vue.js 2.0 中新增的內(nèi)置指令，用于標(biāo)明元素或組件只渲染一次，即使隨 后發(fā)生綁定數(shù)據(jù)的變化或更新，該元素或組件及包含的子元素都不會(huì)再次被編譯和渲染。
2、 自定義指令基礎(chǔ)：
1) 注冊：通過 Vue.directive(id, definition) 方法注冊一個(gè)全局自定義指令，接收參數(shù) id 和定義對象。id 是指令的唯一標(biāo)識(shí)，定義對象則是指令的相關(guān)屬性及鉤子函數(shù)。
也可以通過在組件的 directives 選項(xiàng)注冊一個(gè)局部的自定 義指令
2) 指令的定義對象：
主要包含鉤子函數(shù)：
bind: 只被調(diào)用一次，在指令第一次綁定到元素上時(shí)調(diào)用。用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
update ： 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其孩子的 VNode 更新之前。指令的值可能發(fā)生了改變也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新
componentUpdated: 所在組件的 VNode 及其孩子的 VNode 全部更新時(shí)調(diào)用。
unbind ：指令從元素上解綁時(shí)調(diào)用，只調(diào)用一次。
注：如果我們只需要使用 update 函數(shù)時(shí)，可以直接傳入一個(gè)函數(shù)代替定義對象；
指令綁定的值：
a) data 中的屬性，使用<div v-my-directive="constant string"/></div>
b) 綁定字符串需要加單引號，<div v-my-direcitve="'constant string'"></div>
c) 利用字面修飾符后無需使用單引號
d) 受對象字面量或任意合法的 JavaScript 表達(dá)式:
<div v-my-directive="{ title : 'Vue.js', author : 'You'}" ></div> <div v-my-directive="isExist ? 'yes' : 'no'" ></div>3) 指令的實(shí)例屬性：
a) el: 指令所綁定的元素，可以用來直接操作 DOM 。
b) binding: 一個(gè)對象，包含以下屬性：
name: 指令名，不包括 v- 前綴。
value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression: 綁定值的表達(dá)式形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一個(gè)包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
c) vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)，查閱 VNode API 了解更多詳情。
d) oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。
3、 指令與組件的區(qū)別：
組件一般是指一個(gè)獨(dú)立實(shí)體，組件之間的關(guān)系通常都是樹狀。
指令是一種Decorator模式，用以改寫某個(gè)組件的默認(rèn)行為，或者增強(qiáng)使其獲得額外功能，一般來說可以在同一個(gè)組件上疊加若干個(gè)指令，使其獲得多種功能。
十二、 vue-route
(一) 基本用法：
1、 router-link：
a) <router-link> 組件支持用戶在具有路由功能的應(yīng)用中（點(diǎn)擊）導(dǎo)航。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的?標(biāo)簽，可以通過配置 tag 屬性生成別的標(biāo)簽，<router-link> 比起寫死的?會(huì)好一些；
b) props:路由參數(shù)：
to:格式為字符串或者是對象；
寫法：
append: 在當(dāng)前（相對）路徑前添加基路徑。例如，我們從 /a 導(dǎo)航到一個(gè)相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b
注：另一個(gè)路徑不允許加/；
tag:將touter-link轉(zhuǎn)換為另外一種標(biāo)簽；
active-class：設(shè)置 鏈接激活時(shí)使用的 CSS 類名。默認(rèn)值可以通過路由的構(gòu)造選項(xiàng) linkActiveClass 來全局配置。
2、 router-view
渲染對應(yīng)的路由配置中 components 下的相應(yīng)組件；可以和<transition> 、 <keep-alive>等配合使用，兩個(gè)結(jié)合一起用，要確保在內(nèi)層使用 <keep-alive>：
<transition>
<keep-alive>
</keep-alive>
</transition>
3、 路由信息對象：
路由信息對象表示當(dāng)前激活的路由的狀態(tài)信息，是不可變得，每次成功的導(dǎo)航都會(huì)產(chǎn)生一個(gè)新的對象；
出現(xiàn)的地方：
λ 組件內(nèi)部的鉤子函數(shù)中；
λ 導(dǎo)航的鉤子函數(shù)中
λ watch監(jiān)聽的$route對象中的（to,from）參數(shù)：
例：
scrollBehavior 方法的參數(shù)
路由信息對象的屬性：
$route.path：字符串，對應(yīng)當(dāng)前路由的路徑，總是解析為絕對路徑，如 "/foo/bar"。
：包含了動(dòng)態(tài)片段和全匹配片段，如果沒有路由參數(shù)，就是一個(gè)空對象。route.query：一個(gè) key/value 對象，表示 URL 查詢參數(shù)。例如，對于路徑 /foo?user=1，則有?，如果沒有查詢參數(shù)，則是個(gè)空對象。route.matched：一個(gè)數(shù)組，包含當(dāng)前路由的所有嵌套路徑片段的 路由記錄 。路由記錄就是 routes 配置數(shù)組中的對象副本（還有在 children 數(shù)組）
$route.name：當(dāng)前路由的名稱
4、 router構(gòu)造配置
mode: 配置路由模式:hash | history | abstract
base：應(yīng)用的基路徑。例如，如果整個(gè)單頁應(yīng)用服務(wù)在 /app/ 下，然后 base 就應(yīng)該設(shè)為 "/app/"。（這里有坑）
linkActiveClass: 全局配置 <router-link> 的默認(rèn)『激活 class 類名
5、 router實(shí)例：
屬性：
router.app: 配置了 router 的 Vue 根實(shí)例。
router.mode: 路由使用的 模式。
router.currentRoute:當(dāng)前路由信息對象；
方法：
router.push(location) :進(jìn)行路由的跳轉(zhuǎn)，并且保存到瀏覽器的history中
router.replace(location)：進(jìn)行路由的替換，不會(huì)將上次的路由保存到history中
router.go(n)：執(zhí)行瀏覽器的前進(jìn)動(dòng)作,n代表前進(jìn)的步數(shù)，負(fù)數(shù)代表后退
router.back()： 執(zhí)行瀏覽器的后退動(dòng)作
router.forward()
router.addRoutes(routes): 動(dòng)態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個(gè)符合 routes 選項(xiàng)要求的數(shù)組
6、 動(dòng)態(tài)路由匹配：
書寫方式：
{ path: '/user/:id', component: User } { path: '/user/:username/post/:post_id', component: User }上述的動(dòng)態(tài)值通過?去接受路由參數(shù)的變化：使用路由參數(shù)時(shí)，例如從導(dǎo)航到，原來的組件實(shí)例會(huì)被復(fù)用。因?yàn)閮蓚€(gè)路由都渲染同個(gè)組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用；解決辦法：（監(jiān)測變化）route 對象：
7、 嵌套路由：
在 VueRouter 的參數(shù)中使用 children 配置，屬性值為路由對象數(shù)組；
注意：在子路由的path屬性中設(shè)置路由地址時(shí)，不可以加“/”，否則將會(huì)以根路由進(jìn)行添加；
8、 多視圖多組件渲染：
多視圖對應(yīng)多組件，使用的路由對象屬性為：components；
例：
html：
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
js：
9、 重定向：
屬性為redirect，屬性值可以為{name：“foo”}或“foo”或者為一個(gè)方法的返回值
例：
{ path: '/a', redirect: { name: 'foo' }}
10、 別名：
例：{ path: '/a', component: A, alias: '/b' }
當(dāng)用戶訪問/b時(shí)，路由顯示的是/b,其實(shí)規(guī)則為/a
11、 路由的鉤子函數(shù)：
1) 全局鉤子：（一般不使用）
使用router的實(shí)例對象進(jìn)行注冊；當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)，全局的 beforeEach鉤子按照創(chuàng)建順序調(diào)用。鉤子是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有鉤子 resolve 完之前一直處于 等待中
三個(gè)參數(shù)：
next()： 進(jìn)行管道中的下一個(gè)鉤子
next(false): 中斷當(dāng)前的導(dǎo)航。重置到 from 路由對應(yīng)的地址
next('/') 或next({ path: '/' })：當(dāng)前導(dǎo)航被中斷，重定向到另一個(gè)新的導(dǎo)航：
例：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {})
2) 路由的獨(dú)享鉤子：
在路由的配置項(xiàng)中定義：beforeEnter屬性；
3) 組件內(nèi)的路由鉤子：
beforeRouteEnter：路由跳轉(zhuǎn)之前執(zhí)行，不能獲取this，組件實(shí)例還沒有創(chuàng)建；
beforeRouteUpdate：路由重新跳轉(zhuǎn)之前，該方法在組件復(fù)用時(shí)調(diào)用，該鉤子函數(shù)中可以訪問組件的實(shí)例this
beforeRouteLeave：離開該組件的對應(yīng)路由時(shí)調(diào)用，可以訪問實(shí)例this，一般在用戶未保存信息時(shí)，不允許跳轉(zhuǎn)相應(yīng)的路由，next（false）阻止；
關(guān)于beforeRouteEnter鉤子不能訪問this，可以通過一個(gè)回調(diào)給next來訪問組件實(shí)例，例：
beforeRouteEnter (to, from, next) {next(vm => {// 通過 `vm` 訪問組件實(shí)例}) }12、 數(shù)據(jù)的獲取
1) 導(dǎo)航完成之后獲取：先完成導(dǎo)航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示『加載中』之類的指示。
2) 導(dǎo)航完成之前獲取：導(dǎo)航完成前，在路由的 enter 鉤子中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航。
注：
導(dǎo)航完成之后獲取需要借助組件的watch屬性，在動(dòng)態(tài)路由中組件復(fù)用時(shí)，進(jìn)行數(shù)據(jù)的重新請求；
導(dǎo)航完成之前獲取借助beforeRouteUpdate, 在動(dòng)態(tài)路由中組件復(fù)用時(shí)，進(jìn)行數(shù)據(jù)的重新請求；
13、 組件的懶加載
1、 vue的異步組件和webpack的require.ensure()相結(jié)合，例：
var index = resolve => require.ensure(['@/components/index'], () => resolve(require('@/components/index')))2、 采用amd風(fēng)格的require，例：
var?Hello =?resolve?=>?require(['@/components/Hello'], resolve)3、 把組件按組分塊：
提供 require.ensure 第三個(gè)參數(shù)作為 chunk 的名稱，Webpack 將相同 chunk 下的所有異步模塊打包到一個(gè)異步塊里面 —— 這也意味著我們無須明確列出 require.ensure 的依賴（傳空數(shù)組就行）
例：
十三、 狀態(tài)管理：（vuex）
1、 簡介：
a) 在一些大型應(yīng)用中，有時(shí)我們會(huì)遇到單頁面中包含著大量的組件及復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，而 且可能各組件還會(huì)互相影響各自的狀態(tài)，在這種情況下組件樹中的事件流會(huì)很快變得非常復(fù) 雜，也使調(diào)試變得異常困難。為了解決這種情況，我們往往會(huì)引入狀態(tài)管理這種設(shè)計(jì)模式，來 降低這種情況下事件的復(fù)雜程度并且使調(diào)試變得可以追蹤。
b) 每個(gè)組件都會(huì)擁有自己的狀態(tài)，也可以理解成自身實(shí)例中的 data 對 象。用戶在操作的過程中，會(huì)通過一些交互行為，例如點(diǎn)擊、輸入、拖動(dòng)等修改組件的 狀態(tài)，而此時(shí)往往需要將用戶引起的狀態(tài)變化通知到其他相關(guān)組件，讓他們也進(jìn)行對應(yīng) 的修改。由于 Vue.js 本身的事件流是依賴于 DOM 結(jié)構(gòu)的，組件修改狀態(tài)后需要經(jīng)過 一系列冒泡才能達(dá)到頂部的組件，而且如果需要修改兄弟組件的狀態(tài)還需要共同的父組 件再進(jìn)行一次廣播。這種方式無疑是低效而且不易維護(hù)的，我們也很難去追蹤事件流的 走向。
c) vuex 和 redux 間的差異表示關(guān)注，redux 是 React 生態(tài)環(huán)境中最流行的 Flux 實(shí)現(xiàn)。Redux 事實(shí)上無法感知視圖層，所以它能夠輕松的通過一些簡單綁定和Vue一起使用。vuex區(qū)別在于它是一個(gè)專門為 vue 應(yīng)用所設(shè)計(jì)。這使得它能夠更好地和vue進(jìn)行整合，同時(shí)提供簡潔的API和改善過的開發(fā)體驗(yàn)。
2、 配置使用：
安裝vuex，在main.js中引入vuex進(jìn)行使用；
import vuex from “vuex”, Vue.use(vuex)實(shí)例化Vuex：
const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}} })將vuex掛載到Vue實(shí)例中：
const app = new Vue({el: '#app',// 把 store 對象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件store,components: { Counter },template: `<div class="app"><counter></counter></div>` })現(xiàn)在，你可以通過 store.state 來獲取狀態(tài)對象，以及通過 store.commit 方法觸發(fā)狀態(tài)變更，我們通過提交 mutation 的方式，而非直接改變 this.$store.state.count，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化
3、 核心概念：
a) state：
ν 數(shù)據(jù)的定義以及存放數(shù)據(jù)的屬性，類似于組件內(nèi)部的data屬性；所有在vuex使用的數(shù)據(jù)都必須在此屬性中進(jìn)行定義與聲明；不建議將應(yīng)用所有的數(shù)據(jù)都放入state，交互性低，比較單一使用的數(shù)據(jù)，建議放在組件內(nèi)部定義；
ν mapState輔助函數(shù)
寫法：
對象寫法：
數(shù)組寫法：
當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)
ν 對象展開運(yùn)算符：
注意運(yùn)用此方法時(shí)，因?yàn)閷ο髷U(kuò)展運(yùn)算符是在es提案的stage-3階段，由于babel進(jìn)行轉(zhuǎn)碼時(shí)，在webpack中默認(rèn)配置的是es-2015,所以需要借助babel-plugin-transform-object-rest-spread插件進(jìn)行編譯；
在babel的配置文件中如下配置：
"plugins": ["transform-runtime", "transform-object-rest-spread"],
在computed屬性中的寫法如下：
...mapState({
})
上面的mapState的參數(shù)可以是對象，也可以是數(shù)組，跟mapState輔助函數(shù)中的配置一樣
b) Getters：
應(yīng)用場景：
有時(shí)候，我們需要對state數(shù)據(jù)進(jìn)行一些操作后再在組件中進(jìn)行使用，如果多個(gè)組件都需要操作后的這個(gè)數(shù)據(jù)，我們可能會(huì)在多個(gè)組件computed中都對state進(jìn)行操作一次；
解決辦法：
使用getters：
組件中使用，跟state的使用一樣，可以使用輔助函數(shù)，或者對象展開運(yùn)算符
c) Mutations:
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)；
定義的方式跟getters一樣，例：
回調(diào)函數(shù)的第一個(gè)參數(shù)為state，第二個(gè)參數(shù)可以動(dòng)態(tài)傳入值，值的類型，可以為基本類型或?qū)ο?#xff1b;
提交載荷：
可以使用store.commit(‘increment’,10)
或store.commit({type:’increment’,amount:10})
遵循vue的數(shù)據(jù)相應(yīng)規(guī)則:
在對象上添加新屬性時(shí)，使用 Vue.set(obj, 'newProp', 123)或者
state.obj = { ...state.obj, newProp: 123 }
mutation必須是同步函數(shù)：
如果為異步，則無法跟蹤數(shù)據(jù)
在組件中直接提交（不推薦）
d) actions：
action提交的是mutation，而不是直接更變狀態(tài)。
action可以包含任意異步操作。
注冊：
i. 在actions的內(nèi)部可以獲取以一個(gè)context參數(shù)。這個(gè)參數(shù)相當(dāng)于一個(gè)store實(shí)例，但不是當(dāng)前應(yīng)用的store實(shí)例本身，因?yàn)槿绻捎胢odules方式進(jìn)行數(shù)據(jù)的管理時(shí)，store實(shí)例是一個(gè)數(shù)組；
ii. 可以通過context參數(shù)獲取state或者getters等等，一般可以通過此參數(shù)來提交commit；
分發(fā)action：
應(yīng)用場景：當(dāng)一次action對應(yīng)的數(shù)據(jù)的更改，必須依賴另外一個(gè)action中的數(shù)據(jù)更改時(shí)，必須在本此action中先去觸發(fā)另外一個(gè)action操作；另外一個(gè)action可能為同步，也可能為異步，如果為異步需要借助promise或者async函數(shù)；
// 以載荷形式分發(fā)
在組件中分發(fā)action:
methods: {...mapActions(['increment' // 映射 this.increment() 為 this.$store.dispatch('increment')]),...mapActions({add: 'increment' // 映射 this.add() 為 this.$store.dispatch('increment')})}通過dispatch觸發(fā)異步action：
使用promise:
使用async函數(shù):
getData、getOtherData返回的是promise，或者是axiso的數(shù)據(jù)請求函數(shù)
e) modules：
應(yīng)用場景：
定義：
將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割
如：
模塊的局部狀態(tài)：
對于模塊內(nèi)部的 mutation 和 getter，接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)對象
對于模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來， 根節(jié)點(diǎn)狀態(tài)則為 context.rootState
在getter中根節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù)暴露出來
總結(jié)
以上是生活随笔為你收集整理的vue笔记整理与总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 黑猫315十大行业乱象发布：背后真假套路
- 下一篇： 5分钟了解vue-router的基本使用