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