基礎(chǔ)知識：

vue的生命周期：beforeCreate/created、beforeMount/mounted彻秆、beforeUpdate/updated、beforeDestory/destoryed

vue常用指令：v-for、v-bind（縮寫形式:prop）爸吮、v-on(縮寫形式@click=’sss')释漆、v-if/v-else/v-else-if悲没、v-model、v-once灵汪、v-html檀训、v-show...

vue自定義組件：Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘

vue常用實例方法和屬性：data/$data、methods/$methods享言、$el峻凫、computed(計算屬性)、$watch览露、$set荧琼、$event、$emit...

如果需要更新的屬性需要緩存，則使用計算屬性的方式命锄，否則可以使用methods里的方法來更新屬性（methods里的方法每次重新渲染都會執(zhí)行）

計算屬性默認(rèn)提供了getter堰乔，你還可以給它設(shè)置setter

當(dāng)你數(shù)據(jù)變化是異步或者開銷較大時，可以使用watch偵聽器來響應(yīng)數(shù)據(jù)的變化

v-bind:class的值可以是一個對象脐恩，可實現(xiàn)類似react中classnames模塊的功能

自定義組件上的class會被渲染拼接到template的根節(jié)點的class屬性上（自定義組件上可使用v-bind:class來做class的判斷顯示邏輯）

v-bind:style可以用來綁定內(nèi)聯(lián)樣式镐侯，這個內(nèi)聯(lián)樣式的值可以由一個對象來定義（類似css in js的模式）,且可以被定義為數(shù)組(多個樣式對象)

v-bind:style可以使用多重值的形式：

v-if/v-else/v-else-if的時候，可以用key來管理可復(fù)用的元素

v-if是’真正’的渲染驶冒，它會確保在切換條件過程中條件塊內(nèi)的元素的事件監(jiān)聽器和子組件適時的銷毀和重建

v-if是惰性的苟翻，初始為假，什么也不做骗污，直到為真的時候才渲染元素

v-show總是渲染元素崇猫，只是簡單的進行切換

v-if的切換開銷大，v-show則是初始渲染開銷大需忿，頻繁切換使用v-show诅炉，運行時經(jīng)常改變則使用v-if

v-if和v-for一起使用時，v-for的優(yōu)先級更高

v-for可遍歷數(shù)組屋厘，第二個參數(shù)是索引

v-for可遍歷對象涕烧，第二個參數(shù)是key，第三個參數(shù)是索引

v-for和搭配可減少渲染次數(shù)

v-for和自定義組件使用時擅这，需要使用props來傳遞值

盡可能的為遍歷子元素加上key澈魄，獲得渲染優(yōu)化

數(shù)組變異方法：push/pop/unshift/shift/splice/sort/reverse改變原始數(shù)組

數(shù)組非變異方法：filter/concat/slice不改變原始數(shù)組，總是返回新數(shù)組

Vue不能檢測到數(shù)組索引賦值（使用vm.$set解決）和修改length長度賦值(使用splice解決)的情況

Vue不能檢測對象屬性的添加和刪除(使用vm.$set或Object.assign)

is=“todo-item”這種屬性的寫法比較適合DOM模板

事件修飾符仲翎，它們可串聯(lián)使用：.stop痹扇、.prevent、.capture溯香、.self鲫构、.once、.passive(尤其適合移動端)

.passive不用同時和.prevent使用玫坛，后者會被忽略

按鍵修飾符:.enter结笨、.tab、.delete湿镀、.esc炕吸、.space、.up勉痴、.down赫模、.left、.right

系統(tǒng)按鍵修飾符:.ctrl蒸矛、.alt瀑罗、.shift胸嘴、.meta(?|?|◆)、.exact(允許精確控制系統(tǒng)修飾符組合鍵觸發(fā))

鼠標(biāo)修飾符：.left斩祭、.right劣像、.middle

v-model會忽略表單元素的value、checked摧玫、selected耳奕，僅僅使用實例中的數(shù)據(jù)作為數(shù)據(jù)源

表單事件修飾符：.lazy、.number诬像、.trim

組件是可復(fù)用的vue實例吮铭，具有vue實例大多數(shù)屬性和方法

組件可復(fù)用，每個組件有獨立的空間

組件上的data必須是一個函數(shù)颅停，這樣做避免影響了其他組件

通過Vue.component()全局注冊的組件可在其被注冊后的任何通過newVue()創(chuàng)建的實例所使用，包含其組件樹中的所有組件

通過插槽分發(fā)內(nèi)容(其實就是類似于react的children)

動態(tài)組件配合屬性is來實現(xiàn)

解析DOM模板時需要注意下可能會有不生效的情況掠拳，需要使用is來傳遞組件

Vue組件

全局注冊/局部注冊

局部注冊組件在子組件中不可用

全局注冊的行為必須在根Vue實例創(chuàng)建之前發(fā)生

camelCase的屬性可以在組件中使用kebab-case

可以以對象的模式指定每一個props屬性的類型

父級props的更新會向下流動癞揉，反之則不行

由于JavaScript對象和數(shù)組是引用傳入的，所以當(dāng)子組件對props的改變將會影響到父組件

props類型校驗可以是原生構(gòu)造對象的中的任意一個溺欧，也可以自定義檢驗類型喊熟，通過instanceof檢查

對于絕大多數(shù)特性來說，外部傳入的值會替換掉組件內(nèi)部設(shè)置好的值姐刁，如input的type屬性芥牌，但有的屬性則是會進行合并，如class

inhertAttrs:false設(shè)置不希望根元素繼承特性聂使，可以使用$attrs屬性來設(shè)置繼承的目標(biāo)元素

v-on在設(shè)置事件監(jiān)聽器時壁拉，會把事件名全部轉(zhuǎn)換成小寫，推薦始終使用kebab-case的事件名

v-model可以使用自定義組件中的model屬性自定義

父組件模板的所有東西都會在父級作用域內(nèi)編譯柏靶，子組件的所有內(nèi)容都會在子組件作用域內(nèi)編譯

插槽()/具名插槽()/作用域插槽(slot/slot-scope)

組件可用來緩存被切換后隱藏的組件的狀態(tài)

$root訪問根實例弃理，$parent訪問父組件實例(不推薦)

父組件訪問子組件，使用$refs屬性來獲取設(shè)置了ref屬性的子組件

provide屬性允許我們指定要分享給后代組件使用的方法屎蜓，然后后代組件使用inject屬性來獲得祖先組件分享的方法(依賴注入)

事件偵聽器（$emit派發(fā)的事件）

v-on?指令偵聽

$on?偵聽一個事件

$once?一次性偵聽一個事件

$off?停止偵聽一個事件

慎用遞歸組件

盡量避免組件的循環(huán)引用

優(yōu)先使用template來定義模板痘昌，而不是inline-template

$forceUpdate來強制更新view

組件包含大量靜態(tài)內(nèi)容時，可使用v-once來標(biāo)記炬转，緩存靜態(tài)內(nèi)容

過渡 & 動畫

transition組件控制過渡動畫辆苔，可以給任何元素和組件添加進入/離開過渡

當(dāng)插入或刪除transition中的元素時，vue會做如下處理

自動嗅探元素是否使用了css過渡和動畫扼劈，適當(dāng)時機添加/刪除類名

元素的鉤子函數(shù)會在適當(dāng)時機被調(diào)用

元素既沒有鉤子函數(shù)也沒有css動畫驻啤，插入和刪除操作在下一幀立即執(zhí)行（瀏覽器逐幀動畫機制）

過渡的類名

v-enter/v-enter-active/v-enter-to

v-leave/v-leave-active/v-leave-to

css動畫用法同css過渡，區(qū)別是類名v-enter不會在DOM插入后立即刪除测僵，而是在animationend事件觸發(fā)時刪除

自定義過渡類名街佑，使用以下屬性指定:

enter-class/enter-active-class/enter-to-class

leave-class/leave-active-class/leave-to-class

自定義類名優(yōu)先級高于普通的類名

使用type屬性設(shè)置transition或animation來申明vue使用的動畫類型

transition組件上使用duration來設(shè)置動畫執(zhí)行的時間

可以使用鉤子函數(shù)

beforeEnter/enter/afterEnter/enterCancelled

beforeLeave/leave/afterLeave/leaveCancelled

鉤子函數(shù)使用?v-on指令綁定

鉤子和結(jié)合過渡和動畫使用谢翎，也可以單獨使用

在?enter/leave中，必須使用?done()來進行回調(diào)沐旨，否則會同步調(diào)用森逮，過渡或動畫會立即完成

對于純使用JavaScript來進行的動畫，推薦使用?v-bind:css=“false”來取消css的檢測磁携，減少css的影響

可使用apear設(shè)置初始渲染的過渡

apear/apear-active/apear-to

beforeApear/apear/afterApear/apearCancelled

多元素過渡褒侧，設(shè)置唯一key

過渡模式:

In-out?新元素先過渡，完成后當(dāng)前元素過渡離開

out-in?當(dāng)前元素先過渡谊迄，完成后新元素過渡進入

默認(rèn)行為：進入和離開同時發(fā)生

多個組件過渡使用動態(tài)組件實現(xiàn)

列表過渡

以真實元素呈現(xiàn)闷供，默認(rèn)為?，可使用tag更改呈現(xiàn)標(biāo)簽

過渡模式不可用

內(nèi)部需要唯一?key

列表排序過渡统诺，使用的是FLIP動畫歪脏，使用類名v-move來定義class

可復(fù)用性 & 組合

mixins混入屬性發(fā)生沖突時，以組件數(shù)據(jù)優(yōu)先（一層屬性深度淺合并）

mixins混入方法發(fā)生沖突時粮呢，會將函數(shù)合并為一個數(shù)組婿失，優(yōu)先執(zhí)行混入方法，其次執(zhí)行組件方法

Vue.extend策略和mixins相同

慎用全局混入

合并策略可以自定義（參考vuex的具體實現(xiàn)：Vue.config.optionMergeStrategies）

全局自定義指令：Vue.directive()

局部自定義指令：屬性directives啄寡，類型為Object

鉤子函數(shù)

bind指令第一次綁定到元素時調(diào)用豪硅，只執(zhí)行一次，可用于一次性初始化設(shè)置

inserted元素插入父節(jié)點時調(diào)用

update所有VNode更新時調(diào)用挺物，可能發(fā)生在子VNode之前

componentUpdated指令所在組件在VNode和其子VNode更新后調(diào)用

unbind指令與元素解綁時調(diào)用

鉤子函數(shù)都會被傳入以下參數(shù)：

el指令綁定元素懒浮，可操作DOM

binding指令描述對象

vnodeVue生成的虛擬節(jié)點

oldVnode上一個Vnode，僅在?update和?componentUpdated中使用

指令接受所有合法的JavaScript表達(dá)式

渲染函數(shù) & JSX

render函數(shù)接受createElement方法作為參數(shù)

createElement方法的作用是創(chuàng)建一個虛擬節(jié)點(VNode)

createElement參數(shù)比較復(fù)雜识藤，參照官網(wǎng)：參數(shù)

組件樹中的VNodes必須唯一

render中的v-if/v-for可以使用if/else和map重寫

插槽使用this.$slot.default訪問砚著，作用域插槽使用this.$scopeSlots.default訪問和設(shè)置

可以使用插件babel-plugin-transform-vue-jsx支持JSX語法

將h作為createElement的別名是Vue生態(tài)的一個慣例，也是JSX要求的

函數(shù)式組件 關(guān)鍵詞：functional

函數(shù)式組件渲染開銷低蹋岩，但相應(yīng)的赖草，它不會出現(xiàn)在Vue devtools的組件樹里邊

函數(shù)式組件要求你自己實現(xiàn)同名特性的替換與智能合并

Vue的模板實際編譯成了render方法實現(xiàn)的VNode，可以使用Vue.compile()方法來輸出編譯結(jié)果

插件

插件會為vue提供全局的功能剪个，包括但不限于以下幾種：

添加全局的屬性或方法秧骑，如vue-custom-element

添加全局的資源（指令、過濾器扣囊、過渡等）乎折，如：vue-touch

通過全局?mixins添加一些組件選項，如：vue-router

添加Vue實例方法侵歇，通過添加到?Vue.prototype上實現(xiàn)

一個獨立的庫骂澄，同時有自己的API，又實現(xiàn)以上部分功能惕虑，如：vue-router

Vue插件有一個公開的方法install坟冲，第一個參數(shù)是Vue構(gòu)造器磨镶，第二個參數(shù)是一個可選對象

插件的使用通過全局方法Vue.use(MyPlugin)使用，只會注冊一次插件

在CommonJS中健提，應(yīng)該始終顯式的調(diào)用Vue.use方法

社區(qū)插件列表awesome-vue

過濾器

{{msg|filter}}

全局過濾器使用Vue.filter()創(chuàng)建

局部過濾器使用對象屬性filters創(chuàng)建

過濾器函數(shù)總是接收表達(dá)式的值作為第一個參數(shù)琳猫，過濾器可以有多個，值依次向后傳遞

過濾器可以接收額外的參數(shù)

構(gòu)建 & 部署

標(biāo)簽引入[vue.min.js](https://vuejs.org/js/vue.min.js)

使用vue-cli

webpack + vue-loader

browserify + vueify

rollup + rollup-plugin-vue

利用鉤子函數(shù)Vue.config.errorHandler定義配置來跟蹤運行時錯誤私痹，可以搭配[Sentry](https://sentry.io/)使用（集成配置）

單文件組件（.vue文件）