基礎(chǔ)知識(shí)：
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: ‘<li>{{ p1 }}</li>'})
vue常用實(shí)例方法和屬性： data/$data、 methods/$methods、 $el、 computed(計(jì)算屬性)、 $watch、 $set、 $event、 $emit...
如果需要更新的屬性需要緩存，則使用計(jì)算屬性的方式，否則可以使用 methods里的方法來(lái)更新屬性（ methods里的方法每次重新渲染都會(huì)執(zhí)行）
計(jì)算屬性默認(rèn)提供了 getter，你還可以給它設(shè)置 setter
當(dāng)你數(shù)據(jù)變化是異步或者開銷較大時(shí)，可以使用 watch偵聽器來(lái)響應(yīng)數(shù)據(jù)的變化
v-bind:class的值可以是一個(gè)對(duì)象，可實(shí)現(xiàn)類似 react中 classnames模塊的功能
自定義組件上的 class會(huì)被渲染拼接到 template的根節(jié)點(diǎn)的 class屬性上（自定義組件上可使用 v-bind:class來(lái)做class的判斷顯示邏輯）
v-bind:style可以用來(lái)綁定內(nèi)聯(lián)樣式，這個(gè)內(nèi)聯(lián)樣式的值可以由一個(gè)對(duì)象來(lái)定義（類似css in js的模式）,且可以被定義為數(shù)組(多個(gè)樣式對(duì)象)
v-bind:style可以使用多重值的形式： <div:style=“display:[‘-webkit-box’,’-ms-flexbox’,‘flex']"></div>
v-if/v-else/v-else-if的時(shí)候，可以用key來(lái)管理可復(fù)用的元素
v-if是’真正’的渲染，它會(huì)確保在切換條件過(guò)程中條件塊內(nèi)的元素的事件監(jiān)聽器和子組件適時(shí)的銷毀和重建
v-if是惰性的，初始為假，什么也不做，直到為真的時(shí)候才渲染元素
v-show總是渲染元素，只是簡(jiǎn)單的進(jìn)行切換
v-if的切換開銷大， v-show則是初始渲染開銷大，頻繁切換使用 v-show，運(yùn)行時(shí)經(jīng)常改變則使用 v-if
v-if和 v-for一起使用時(shí)， v-for的優(yōu)先級(jí)更高
v-for可遍歷數(shù)組，第二個(gè)參數(shù)是索引
v-for可遍歷對(duì)象，第二個(gè)參數(shù)是 key，第三個(gè)參數(shù)是索引
v-for和 <template>搭配可減少渲染次數(shù)
v-for和自定義組件使用時(shí)，需要使用 props來(lái)傳遞值
盡可能的為遍歷子元素加上 key，獲得渲染優(yōu)化
數(shù)組變異方法： push/pop/unshift/shift/splice/sort/reverse改變?cè)紨?shù)組
數(shù)組非變異方法： filter/concat/slice 不改變?cè)紨?shù)組，總是返回新數(shù)組
Vue不能檢測(cè)到數(shù)組索引賦值（使用 vm.$set解決）和修改 length長(zhǎng)度賦值(使用 splice解決)的情況
Vue不能檢測(cè)對(duì)象屬性的添加和刪除(使用 vm.$set或 Object.assign)
is=“todo-item”這種屬性的寫法比較適合DOM模板
事件修飾符，它們可串聯(lián)使用： .stop、 .prevent、 .capture、 .self、 .once、 .passive(尤其適合移動(dòng)端)
.passive不用同時(shí)和 .prevent使用，后者會(huì)被忽略
按鍵修飾符: .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會(huì)忽略表單元素的 value、 checked、 selected，僅僅使用實(shí)例中的數(shù)據(jù)作為數(shù)據(jù)源
表單事件修飾符： .lazy、 .number、 .trim
組件是可復(fù)用的vue實(shí)例，具有vue實(shí)例大多數(shù)屬性和方法
組件可復(fù)用，每個(gè)組件有獨(dú)立的空間
組件上的data必須是一個(gè)函數(shù)，這樣做避免影響了其他組件
通過(guò) Vue.component()全局注冊(cè)的組件可在其被注冊(cè)后的任何通過(guò) newVue()創(chuàng)建的實(shí)例所使用，包含其組件樹中的所有組件
通過(guò)插槽 <slot>分發(fā)內(nèi)容(其實(shí)就是類似于react的children)
動(dòng)態(tài)組件 <component>配合屬性 is來(lái)實(shí)現(xiàn)
解析DOM模板時(shí)需要注意下可能會(huì)有不生效的情況，需要使用is來(lái)傳遞組件
Vue組件
全局注冊(cè)/局部注冊(cè)
局部注冊(cè)組件在子組件中不可用
全局注冊(cè)的行為必須在根Vue實(shí)例創(chuàng)建之前發(fā)生
camelCase的屬性可以在組件中使用 kebab-case
可以以對(duì)象的模式指定每一個(gè) props屬性的類型
父級(jí) props的更新會(huì)向下流動(dòng)，反之則不行
由于JavaScript對(duì)象和數(shù)組是引用傳入的，所以當(dāng)子組件對(duì)props的改變將會(huì)影響到父組件
props類型校驗(yàn)可以是原生構(gòu)造對(duì)象的中的任意一個(gè)，也可以自定義檢驗(yàn)類型，通過(guò) instanceof檢查
對(duì)于絕大多數(shù)特性來(lái)說(shuō)，外部傳入的值會(huì)替換掉組件內(nèi)部設(shè)置好的值，如input的type屬性，但有的屬性則是會(huì)進(jìn)行合并，如class
inhertAttrs:false設(shè)置不希望根元素繼承特性，可以使用 $attrs屬性來(lái)設(shè)置繼承的目標(biāo)元素
v-on在設(shè)置事件監(jiān)聽器時(shí)，會(huì)把事件名全部轉(zhuǎn)換成小寫，推薦始終使用 kebab-case的事件名
v-model可以使用自定義組件中的 model屬性自定義
父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯，子組件的所有內(nèi)容都會(huì)在子組件作用域內(nèi)編譯
插槽( <slot></slot>)/具名插槽( <slotname=“header"></slot>)/作用域插槽( slot/slot-scope)
<keep-alive>組件可用來(lái)緩存被切換后隱藏的組件的狀態(tài)
$root訪問(wèn)根實(shí)例， $parent訪問(wèn)父組件實(shí)例(不推薦)
父組件訪問(wèn)子組件，使用 $refs屬性來(lái)獲取設(shè)置了 ref屬性的子組件
provide屬性允許我們指定要分享給后代組件使用的方法，然后后代組件使用 inject屬性來(lái)獲得祖先組件分享的方法(依賴注入)
事件偵聽器（ $emit派發(fā)的事件）
v-on 指令偵聽
$on 偵聽一個(gè)事件
$once 一次性偵聽一個(gè)事件
$off 停止偵聽一個(gè)事件
慎用遞歸組件
盡量避免組件的循環(huán)引用
優(yōu)先使用 template來(lái)定義模板，而不是 inline-template
$forceUpdate來(lái)強(qiáng)制更新view
組件包含大量靜態(tài)內(nèi)容時(shí)，可使用 v-once來(lái)標(biāo)記，緩存靜態(tài)內(nèi)容
過(guò)渡 & 動(dòng)畫
transition組件控制過(guò)渡動(dòng)畫，可以給任何元素和組件添加進(jìn)入/離開過(guò)渡
當(dāng)插入或刪除 transition中的元素時(shí)，vue會(huì)做如下處理
自動(dòng)嗅探元素是否使用了css過(guò)渡和動(dòng)畫，適當(dāng)時(shí)機(jī)添加/刪除類名
元素的鉤子函數(shù)會(huì)在適當(dāng)時(shí)機(jī)被調(diào)用
元素既沒有鉤子函數(shù)也沒有css動(dòng)畫，插入和刪除操作在下一幀立即執(zhí)行（瀏覽器逐幀動(dòng)畫機(jī)制）
過(guò)渡的類名
v-enter/v-enter-active/v-enter-to
v-leave/v-leave-active/v-leave-to
css動(dòng)畫用法同css過(guò)渡，區(qū)別是類名 v-enter不會(huì)在DOM插入后立即刪除，而是在 animationend事件觸發(fā)時(shí)刪除
自定義過(guò)渡類名，使用以下屬性指定:
enter-class/enter-active-class/enter-to-class
leave-class/leave-active-class/leave-to-class
自定義類名優(yōu)先級(jí)高于普通的類名
使用 type屬性設(shè)置 transition或 animation來(lái)申明vue使用的動(dòng)畫類型
transition組件上使用 duration來(lái)設(shè)置動(dòng)畫執(zhí)行的時(shí)間
可以使用鉤子函數(shù)
beforeEnter/enter/afterEnter/enterCancelled
beforeLeave/leave/afterLeave/leaveCancelled
鉤子函數(shù)使用 v-on指令綁定
鉤子和結(jié)合過(guò)渡和動(dòng)畫使用，也可以單獨(dú)使用
在 enter/leave中，必須使用 done()來(lái)進(jìn)行回調(diào)，否則會(huì)同步調(diào)用，過(guò)渡或動(dòng)畫會(huì)立即完成
對(duì)于純使用JavaScript來(lái)進(jìn)行的動(dòng)畫，推薦使用 v-bind:css=“false”來(lái)取消css的檢測(cè)，減少css的影響
可使用 apear設(shè)置初始渲染的過(guò)渡
apear/apear-active/apear-to
beforeApear/apear/afterApear/apearCancelled
多元素過(guò)渡，設(shè)置唯一 key
過(guò)渡模式:
In-out 新元素先過(guò)渡，完成后當(dāng)前元素過(guò)渡離開
out-in 當(dāng)前元素先過(guò)渡，完成后新元素過(guò)渡進(jìn)入
默認(rèn)行為：進(jìn)入和離開同時(shí)發(fā)生
多個(gè)組件過(guò)渡使用動(dòng)態(tài)組件實(shí)現(xiàn)
列表過(guò)渡 <transition-group>
以真實(shí)元素呈現(xiàn)，默認(rèn)為 <span>，可使用tag更改呈現(xiàn)標(biāo)簽
過(guò)渡模式不可用
內(nèi)部需要唯一 key
列表排序過(guò)渡，使用的是 FLIP動(dòng)畫，使用類名 v-move來(lái)定義class
可復(fù)用性 & 組合
mixins混入屬性發(fā)生沖突時(shí)，以組件數(shù)據(jù)優(yōu)先（一層屬性深度淺合并）
mixins混入方法發(fā)生沖突時(shí)，會(huì)將函數(shù)合并為一個(gè)數(shù)組，優(yōu)先執(zhí)行混入方法，其次執(zhí)行組件方法
Vue.extend策略和 mixins相同
慎用全局混入
合并策略可以自定義（參考 vuex的具體實(shí)現(xiàn)： Vue.config.optionMergeStrategies）
全局自定義指令： Vue.directive()
局部自定義指令：屬性 directives，類型為 Object
鉤子函數(shù)
bind 指令第一次綁定到元素時(shí)調(diào)用，只執(zhí)行一次，可用于一次性初始化設(shè)置
inserted 元素插入父節(jié)點(diǎn)時(shí)調(diào)用
update 所有VNode更新時(shí)調(diào)用，可能發(fā)生在子VNode之前
componentUpdated 指令所在組件在VNode和其子VNode更新后調(diào)用
unbind 指令與元素解綁時(shí)調(diào)用
鉤子函數(shù)都會(huì)被傳入以下參數(shù)：
el 指令綁定元素，可操作DOM
binding 指令描述對(duì)象
vnode Vue生成的虛擬節(jié)點(diǎn)
oldVnode 上一個(gè) Vnode，僅在 update和 componentUpdated中使用
指令接受所有合法的JavaScript表達(dá)式
渲染函數(shù) & JSX
render函數(shù)接受 createElement方法作為參數(shù)
createElement方法的作用是創(chuàng)建一個(gè)虛擬節(jié)點(diǎn)(VNode)
createElement參數(shù)比較復(fù)雜，參照官網(wǎng)：參數(shù)
組件樹中的 VNodes必須唯一
render中的 v-if/v-for可以使用 if/else和 map重寫
插槽使用 this.$slot.default訪問(wèn)，作用域插槽使用 this.$scopeSlots.default訪問(wèn)和設(shè)置
可以使用插件 babel-plugin-transform-vue-jsx支持JSX語(yǔ)法
將h作為 createElement的別名是Vue生態(tài)的一個(gè)慣例，也是JSX要求的
函數(shù)式組件 關(guān)鍵詞：functional
函數(shù)式組件渲染開銷低，但相應(yīng)的，它不會(huì)出現(xiàn)在Vue devtools的組件樹里邊
函數(shù)式組件要求你自己實(shí)現(xiàn)同名特性的替換與智能合并
Vue的模板實(shí)際編譯成了 render方法實(shí)現(xiàn)的 VNode，可以使用 Vue.compile()方法來(lái)輸出編譯結(jié)果
插件
插件會(huì)為vue提供全局的功能，包括但不限于以下幾種：
添加全局的屬性或方法，如vue-custom-element
添加全局的資源（指令、過(guò)濾器、過(guò)渡等），如：vue-touch
通過(guò)全局 mixins添加一些組件選項(xiàng)，如：vue-router
添加Vue實(shí)例方法，通過(guò)添加到 Vue.prototype上實(shí)現(xiàn)
一個(gè)獨(dú)立的庫(kù)，同時(shí)有自己的API，又實(shí)現(xiàn)以上部分功能，如：vue-router
Vue插件有一個(gè)公開的方法 install，第一個(gè)參數(shù)是Vue構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選對(duì)象
插件的使用通過(guò)全局方法 Vue.use(MyPlugin)使用，只會(huì)注冊(cè)一次插件
在CommonJS中，應(yīng)該始終顯式的調(diào)用 Vue.use方法
社區(qū)插件列表awesome-vue
過(guò)濾器
{{msg|filter}}
<divv-bind=“msg|filter"></div>
全局過(guò)濾器使用Vue.filter()創(chuàng)建
局部過(guò)濾器使用對(duì)象屬性filters創(chuàng)建
過(guò)濾器函數(shù)總是接收表達(dá)式的值作為第一個(gè)參數(shù)，過(guò)濾器可以有多個(gè)，值依次向后傳遞
過(guò)濾器可以接收額外的參數(shù)
構(gòu)建 & 部署
<script>標(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定義配置來(lái)跟蹤運(yùn)行時(shí)錯(cuò)誤，可以搭配 [Sentry](https://sentry.io/)使用（集成配置）
單文件組件（ .vue文件）
