Vue 超快速學習

Vue 超快速學習 基礎知識： 1.vue的生命週期： 

beforeCreate/created

、 

beforeMount/mounted

、 

beforeUpdate/updated

、 

beforeDestory/destoryed

2.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

...
3.vue自定義組件： 

Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>'})

4.vue經常使用實例方法和屬性： 

data/$data

、 

methods/$methods

、 

$el

、 

computed

(計算屬性)、 

$watch

、 

$set

、 

$event

、 

$emit

...
5.若是須要更新的屬性須要緩存，則使用計算屬性的方式，不然可使用 

methods

裏的方法來更新屬性（ 

methods

裏的方法每次從新渲染都會執行）
6.計算屬性默認提供了 

getter

，你還能夠給它設置 

setter

7.當你數據變化是異步或者開銷較大時，可使用 

watch

偵聽器來響應數據的變化

8.v-bind:class

的值能夠是一個對象，可實現相似 

react

中 

classnames

模塊的功能
9.自定義組件上的 

class

會被渲染拼接到 

template

的根節點的 

class

屬性上（自定義組件上可以使用 

v-bind:class

來作class的判斷顯示邏輯）

10.v-bind:style

能夠用來綁定內聯樣式，這個內聯樣式的值能夠由一個對象來定義（相似css in js的模式）,且能夠被定義爲數組(多個樣式對象)

11.v-bind:style

可使用多重值的形式： 

<div:style=「display:[‘-webkit-box’,’-ms-flexbox’,‘flex']"></div>

12.v-if/v-else/v-else-if

的時候，能夠用key來管理可複用的元素

13.v-if

是’真正’的渲染，它會確保在切換條件過程當中條件塊內的元素的事件監聽器和子組件適時的銷燬和重建

14.v-if

是惰性的，初始爲假，什麼也不作，直到爲真的時候才渲染元素

15.v-show

老是渲染元素，只是簡單的進行切換

16.v-if

的切換開銷大， 

v-show

則是初始渲染開銷大，頻繁切換使用 

v-show

，運行時常常改變則使用 

v-if

17.v-if

和 

v-for

一塊兒使用時， 

v-for

的優先級更高

18.v-for

可遍歷數組，第二個參數是索引

19.v-for

可遍歷對象，第二個參數是 

key

，第三個參數是索引

20.v-for

和 

<template>

搭配可減小渲染次數

21.v-for

和自定義組件使用時，須要使用 

props

來傳遞值
22.儘量的爲遍歷子元素加上 

key

，得到渲染優化
23.數組變異方法： 

push/pop/unshift/shift/splice/sort/reverse

改變原始數組
24.數組非變異方法： 

filter/concat/slice

 不改變原始數組，老是返回新數組
25.Vue不能檢測到數組索引賦值（使用 

vm.$set

解決）和修改 

length

長度賦值(使用 

splice

解決)的狀況
26.Vue不能檢測對象屬性的添加和刪除(使用 

vm.$set

或 

Object.assign

)

27.is=「todo-item」

這種屬性的寫法比較適合DOM模板
28.事件修飾符，它們可串聯使用： 

.stop

、 

.prevent

、 

.capture

、 

.self

、 

.once

、 

.passive

(尤爲適合移動端)

29. .passive

不用同時和 

.prevent

使用，後者會被忽略
30.按鍵修飾符: 

.enter

、 

.tab

、 

.delete

、 

.esc

、 

.space

、 

.up

、 

.down

、 

.left

、 

.right

31.系統按鍵修飾符: 

.ctrl

、 

.alt

、 

.shift

、 

.meta(⌘|⊞|◆)

、 

.exact

(容許精確控制系統修飾符組合鍵觸發)
32.鼠標修飾符： 

.left

、 

.right

、 

.middle

33.v-model

會忽略表單元素的 

value

、 

checked

、 

selected

，僅僅使用實例中的數據做爲數據源
34.表單事件修飾符： 

.lazy

、 

.number

、 

.trim

35.組件是可複用的vue實例，具備vue實例大多數屬性和方法
36.組件可複用，每一個組件有獨立的空間
37.組件上的data必須是一個函數，這樣作避免影響了其餘組件
38.經過 

Vue.component()

全局註冊的組件可在其被註冊後的任何經過 

newVue()

建立的實例所使用，包含其組件樹中的全部組件
39.經過插槽 

<slot>

分發內容(其實就是相似於react的children)
40.動態組件 

<component>

配合屬性 

is

來實現
41.解析DOM模板時須要注意下可能會有不生效的狀況，須要使用is來傳遞組件
 
Vue組件 1.全局註冊/局部註冊
2.局部註冊組件在子組件中不可用
3.全局註冊的行爲必須在根Vue實例建立以前發生

4.camelCase

的屬性能夠在組件中使用 

kebab-case

5.能夠以對象的模式指定每個 

props

屬性的類型
6.父級 

props

的更新會向下流動，反之則不行
7.因爲JavaScript對象和數組是引用傳入的，因此當子組件對props的改變將會影響到父組件
8.props類型校驗能夠是原生構造對象的中的任意一個，也能夠自定義檢驗類型，經過 

instanceof

檢查
9.對於絕大多數特性來講，外部傳入的值會替換掉組件內部設置好的值，如input的type屬性，但有的屬性則是會進行合併，如class

10.inhertAttrs:false

設置不但願根元素繼承特性，可使用 

$attrs

屬性來設置繼承的目標元素

11.v-on

在設置事件監聽器時，會把事件名所有轉換成小寫，推薦始終使用 

kebab-case

的事件名

12.v-model

可使用自定義組件中的 

model

屬性自定義
13.父組件模板的全部東西都會在父級做用域內編譯，子組件的全部內容都會在子組件做用域內編譯
14.插槽( 

<slot></slot>

)/具名插槽( 

<slotname=「header"></slot>

)/做用域插槽( 

slot/slot-scope

)

15.<keep-alive>

組件可用來緩存被切換後隱藏的組件的狀態

16.$root

訪問根實例， 

$parent

訪問父組件實例(不推薦)
17.父組件訪問子組件，使用 

$refs

屬性來獲取設置了 

ref

屬性的子組件

18.provide

屬性容許咱們指定要分享給後代組件使用的方法，而後後代組件使用 

inject

屬性來得到祖先組件分享的方法(依賴注入)
19.事件偵聽器（ 

$emit

派發的事件）
　　

1)v-on

 指令偵聽

　　2)$on

 偵聽一個事件

　　3)$once

 一次性偵聽一個事件

　　4)$off

 中止偵聽一個事件
20.慎用遞歸組件
21.儘可能避免組件的循環引用
22.優先使用 

template

來定義模板，而不是 

inline-template

23.$forceUpdate

來強制更新view
24.組件包含大量靜態內容時，可以使用 

v-once

來標記，緩存靜態內容
 
過渡 & 動畫

1.transition

組件控制過渡動畫，能夠給任何元素和組件添加進入/離開過渡
2.當插入或刪除 

transition

中的元素時，vue會作以下處理
　　1)自動嗅探元素是否使用了css過渡和動畫，適當時機添加/刪除類名
　　2)元素的鉤子函數會在適當時機被調用
　　3)元素既沒有鉤子函數也沒有css動畫，插入和刪除操做在下一幀當即執行（瀏覽器逐幀動畫機制）
3.過渡的類名

　　1)v-enter/v-enter-active/v-enter-to

2)v-leave/v-leave-active/v-leave-to

4.css動畫用法同css過渡，區別是類名 

v-enter

不會在DOM插入後當即刪除，而是在 

animationend

事件觸發時刪除
5.自定義過渡類名，使用如下屬性指定:

　　1）enter-class/enter-active-class/enter-to-class

　　2）leave-class/leave-active-class/leave-to-class

3）自定義類名優先級高於普通的類名
6.使用 

typ

e屬性設置 

transition

或 

animation

來申明vue使用的動畫類型

7.transition

組件上使用 

duration

來設置動畫執行的時間
8.可使用鉤子函數

　　1）beforeEnter/enter/afterEnter/enterCancelled

2)beforeLeave/leave/afterLeave/leaveCancelled

3）鉤子函數使用 

v-on

指令綁定
　　4）鉤子和結合過渡和動畫使用，也能夠單獨使用
　　5）在 

enter/leave

中，必須使用 

done()

來進行回調，不然會同步調用，過渡或動畫會當即完成
　　6)對於純使用JavaScript來進行的動畫，推薦使用 

v-bind:css=「false」

來取消css的檢測，減小css的影響
9.可以使用 

apear

設置初始渲染的過渡

　　1)apear/apear-active/apear-to

2)beforeApear/apear/afterApear/apearCancelled

10.多元素過渡，設置惟一 

key

11.過渡模式:

　　1)In-out

 新元素先過渡，完成後當前元素過渡離開

　　2)out-in

 當前元素先過渡，完成後新元素過渡進入
　　

3)默認行爲

：進入和離開同時發生
12.多個組件過渡使用動態組件實現
13.列表過渡 

<transition-group>

1)以真實元素呈現，默認爲 

<span>

，可以使用tag更改呈現標籤
　　2)過渡模式不可用
　　3)內部須要惟一 

key

4)列表排序過渡，使用的是 

FLIP

動畫，使用類名 

v-move

來定義class
 
可複用性 & 組合

1.mixins

混入屬性發生衝突時，以組件數據優先（一層屬性深度淺合併）

2.mixins

混入方法發生衝突時，會將函數合併爲一個數組，優先執行混入方法，其次執行組件方法

3.Vue.extend

策略和 

mixins

相同
4.慎用全局混入
5.合併策略能夠自定義（參考 

vuex

的具體實現： 

Vue.config.optionMergeStrategies

）
6.全局自定義指令： 

Vue.directive()

7.局部自定義指令：屬性 

directives

，類型爲 

Object

8.鉤子函數
　　1)bind 指令第一次綁定到元素時調用，只執行一次，可用於一次性初始化設置
　　2)inserted 元素插入父節點時調用
　　3)update 全部VNode更新時調用，可能發生在子VNode以前
　　4)componentUpdated 指令所在組件在VNode和其子VNode更新後調用
　　5)unbind 指令與元素解綁時調用
9.鉤子函數都會被傳入如下參數：
　　1)el 指令綁定元素，可操做DOM
　　2)binding 指令描述對象
　　3)vnode Vue生成的虛擬節點
　　4)oldVnode 上一個 

Vnode

，僅在 

update

和 

componentUpdated

中使用
10.指令接受全部合法的JavaScript表達式
 
渲染函數 & JSX

1.render

函數接受 

createElement

方法做爲參數

2.createElement

方法的做用是建立一個虛擬節點(VNode)

3.createElement

參數比較複雜，參照官網：參數
4.組件樹中的 

VNodes

必須惟一
5.render中的 

v-if/v-for

可使用 

if/else

和 

map

重寫
6.插槽使用 

this.$slot.default

訪問，做用域插槽使用 

this.$scopeSlots.default

訪問和設置
7.可使用插件 

babel-plugin-transform-vue-jsx

支持JSX語法
8.將h做爲 

createElement

的別名是Vue生態的一個慣例，也是JSX要求的
9.函數式組件 關鍵詞：functional
10.函數式組件渲染開銷低，但相應的，它不會出如今Vue devtools的組件樹裏邊
11.函數式組件要求你本身實現同名特性的替換與智能合併
12.Vue的模板實際編譯成了 

render

方法實現的 

VNode

，可使用 

Vue.compile()

方法來輸出編譯結果
 
插件 1.插件會爲vue提供全局的功能，包括但不限於如下幾種：
　　1)添加全局的屬性或方法，如vue-custom-element
　　2)添加全局的資源（指令、過濾器、過渡等），如：vue-touch
　　3)經過全局 

mixins

添加一些組件選項，如：vue-router
　　4)添加Vue實例方法，經過添加到 

Vue.prototype

上實現
　　5)一個獨立的庫，同時有本身的API，又實現以上部分功能，如：vue-router
2.Vue插件有一個公開的方法 

install

，第一個參數是Vue構造器，第二個參數是一個可選對象
3.插件的使用經過全局方法 

Vue.use(MyPlugin)

使用，只會註冊一次插件
4.在CommonJS中，應該始終顯式的調用 

Vue.use

方法
5.社區插件列表awesome-vue
 
過濾器

1.{{msg|filter}}

2.<divv-bind=「msg|filter"></div>

3.全局過濾器使用Vue.filter()建立
4.局部過濾器使用對象屬性filters建立
5.過濾器函數老是接收表達式的值做爲第一個參數，過濾器能夠有多個，值依次向後傳遞
6.過濾器能夠接收額外的參數
 
構建 & 部署

1.<script>

標籤引入 

[vue.min.js](https://vuejs.org/js/vue.min.js)

2.使用 

vue-cli

1)webpack + vue-loader
　　2)browserify + vueify
　　3)rollup + rollup-plugin-vue
3.利用鉤子函數 

Vue.config.errorHandler

定義配置來跟蹤運行時錯誤，能夠搭配 

[Sentry](https://sentry.io/)

使用（集成配置）
4.單文件組件（ 

.vue

文件）
轉載於猿2048:➧《Vue 超快速學習》