vue API 知識點(2)---選項總結
一、選項 / 資料
1.data
當一個元件被定義,data 必須宣告為返回一個初始資料物件的函式,因為元件可能被用來建立多個例項,如果 data 仍然是一個純碎的物件,則所有的例項將被共享引用同一個資料物件。通過提供 data 函式,每次建立一個新例項後,我們能夠呼叫 data 函式,從而返回初始資料的一個全新副本資料物件。
2.props
props 可以是陣列或者物件,用於接收來自父元件的資料。props 中使用物件可以配置高階選項,型別檢測,自定義驗證,設定預設值
可以使用以下選項
type:可以是原生建構函式中的一種:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義建構函式,或上述內容組成的陣列。會檢查一個 prop 是否是給定的型別,否則丟擲警告。
default:為 prop 指定一個預設值。如果該 prop 沒有被傳入,則換做用這個值。物件或陣列的預設值必須從一個工廠函式返回
required:Boolean 定義該 prop 是否是必填項
validator:function 自定義驗證函式會將該 prop 的值作為唯一的引數帶入。返回 false 就給預設值,控制檯有警告
props: { // 檢測型別 height: Number, // 檢測型別 + 其他驗證 age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } }
3.propsData
只用於 new 建立的例項中,建立例項時傳遞 props,主要作用時方便測試(開發的過程中基本用不到)
4.computed 計算屬性
計算屬性將被混入到 Vue 例項中,所有 geter 和 setter 的 this 上下文自動地繫結為 Vue 例項
注意如果你為一個計算屬性使用了箭頭函式,則 this 不會指向這個元件的例項,不過你仍然可以將其例項作為函式的第一個引數來訪問。
計算屬性的結果會被快取,除非依賴的響應式 property 變化才會重新計算。注意,如果某個依賴(必須非響應式 property)在該例項範疇之外,則計算屬性是不會被更新的。
<p>a + b 的結果是:{{ count }}</p>
computed: { count(){ return this.a + this.b } }
計算屬性 vs 方法
<p>a + b 的結果是:{{ count() }}</p>
methods: { count(){ return this.a + this.b } }
我們可以將同一函式定義為一個方法而不是一個計算屬性,兩種方式的最終結果確實是完全相同的。不同的是計算屬性是基於他們的響應式依賴進行快取的。只在相應響應式依賴發生改變時他們才會重新計算求值。就是說只要 a 或者 b 還沒有發生改變,多次訪問 count 計算屬性會立即返回之前的計算結果,而不必再次執行函式。
相比之下,每當觸發重新渲染時,呼叫方法將總會再次執行函式,
我們為什麼需要快取? 假設我們有一個性能開銷比較大的計算屬性 A,他需要遍歷一個巨大的陣列並做大量的計算,然後我們可能有其他的計算屬性依賴於 A。如果沒有快取我們將不可避免的多次執行 A 的getter。如果不希望有快取出現,請用方法代替。
計算屬性的 setter
計算屬性預設只有 getter ,不過在需要時也可以提供一個 setter
computed: { str: { get: function() { return this.a + this.b }, set: function(newVlaue) { var abs = newValue.split(' ') this.a = abs[0] this.b = abs[abs.length - 1] } } }
現在執行 this.str = '2 3 4 5'時,setter 會被呼叫,this.a 和 this.b 也會相應地被更新
5.methods 事件處理
在模板中通過 v-on 定義方法名,在 methods 中定義方法
有時在內聯語句處理器中訪問原始的 DOM 事件,可以用特殊變數 $event 把它傳入方法
<button @click="count(200, $event)">按鈕</button> <button @click="count2">按鈕2</button>
methods: { count: function(val, event) { if(event) { event.preventDefault() } // ... }, count2: function(event) {// 如果模板中什麼都不傳遞,在這裡可以預設直接接受一個引數就是 dom 物件 if(event) { event.preventDefault() } // ... } }
6.watch 監聽器
一個物件,鍵是需要觀察的表示式,值是對應回撥函式,值也可以是方法名,或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch(),遍歷 watch 物件的每一個屬性
值是包括選項的物件,有三個選項
handler:回撥函式,即監聽到變化時應該執行的函式
deep: Boolean,確認是否深度監聽
為了發現物件內部值的變化,可以在選項引數中指定 deep: true 注意監聽陣列的變更不需要這麼做
immediate:Boolean,為true時,將立即以表示式的當前值出發回撥(進入頁面就開始監聽)
watch: { a(){}, // 該回調會在任何被監聽的物件 property 改變時被呼叫,不論其被巢狀多深 b: { handler: function(){}, deep: true }, // 該回調將會在偵聽開始之後立即呼叫 c: { handler: function(), immediate: true }, // 可以傳入回撥陣列,他們會被一一呼叫 d: [ handle1, function handle2(){}, { handler: function handle3(){} } ] }
二、選項 / DOM
在開發的過程中很少需要考慮這些東西,看看官網熟悉一下
到官網去了解一下
三、選項 / 生命週期鉤子
每個 Vue 例項在被建立時都要經過一系列的初始化過程,設定資料監聽,編譯模板,例項掛載到 DOM ,資料變化時更新 DOM 等,這裡面有一系列的函式,稱之為生命週期鉤子
1.beforeCreate
在例項初始化之後,資料觀測(data observer) 和 event/watcher 事件配置之前被呼叫,此時元件的選項物件還沒有建立,el 和 data 並未初始化,因此無法訪問 methods,data,computed 等上的方法和資料
2.created
在例項建立完成之後被立即呼叫。這一步,例項已經完成以下配置:資料觀測(data observer),property 和方法的運算,watch/event 事件回撥。然而掛載階段還沒開始,$el property 目前尚不可用。這是一個常用的生命週期,這裡面可以呼叫 methods 中的方法,改變 data 中的資料,並且修改可以通過 vue 的響應式繫結體現在頁面上,獲取 計算屬性 等等,通常我們在這裡請求介面中的資料,
3.beforeMount
在掛在之前被呼叫,相關的 render 函式首次被呼叫,例項已經完成一下的配置:編譯模板,把 data 裡面的資料和模板生成 html,完成了 el 和 data 初始化,注意此時還沒有掛載到 html 頁面上
4.mounted
例項被掛載後被呼叫,這時 el 被新建立的 vm.$el 替換了。如果跟例項掛載到了一個文件內的元素上,當 mounted 被呼叫時 vm.$el 也在文件內
注意 mounted 不會保證所有的子元件也一起被掛載,如果希望等到整個檢視都渲染完畢,可以在 mounted 內部使用 vm.$nextTick
mounted(){ this.$nextTick(function(){ // ... }) }
5.beforeUpdate
資料更新時呼叫,發生在虛擬 DOM 打補丁之前,這裡適合在更新之前訪問現有的 DOM,比如手動移除已新增的事件監聽器。
該鉤子在伺服器端渲染期間不被呼叫,因為只有初次渲染會在服務端進行
6.updated
由於資料更改導致的虛擬 DOM 重新渲染和打補丁,在這之後會呼叫該鉤子。
當這個鉤子被呼叫時,元件 DOM 已經更新,所以你現在可以執行依賴於 DOM 的操作。然而大多數情況下,你應該避免在此期間更改狀態。如果要相應狀態改變,通常最好使用 計算屬性 或 watcher 取而代之。
注意 updated 不會保證所有子元件也都一起被重繪。如果你希望等到整個檢視都重繪完畢,可以在 updated 裡使用 vm.$nextTick(同上)
7.activated
被 keep-alive 快取的元件啟用時呼叫
該鉤子在伺服器端渲染期間不被呼叫
8.deactivated
被 keep-alive 快取的元件停用時被呼叫
該鉤子在伺服器端渲染期間不被呼叫
9.beforeDestroy
例項銷燬之前呼叫。在這一步,例項仍然完全可用
該鉤子在伺服器端渲染期間不被呼叫
10.destroyed
例項銷燬後呼叫,該鉤子被呼叫後,對應 Vue 例項的所有指令都被解綁,所有的事件監聽器被移除,所有的子例項也都被銷燬
該鉤子在伺服器端渲染期間不被呼叫
11.errorCaptured
當捕獲一個來自子孫元件的錯誤時被呼叫,此鉤子會收到三個引數:錯誤物件、發生錯誤的元件例項和一個包含錯誤來源資訊的字串。此鉤子返回 false 以阻止該錯誤繼續向上傳播
可以在此鉤子中修改元件的狀態。因此在捕獲錯誤時,在模板或渲染函式中有一個條件判斷來繞過其他內容就很重要,不然該元件可能會進入一個無限的渲染迴圈
錯誤傳播規則
1.預設情況下,如果全域性的 config.errorHandler 被定義,所有的錯誤仍會發送它,因此這些錯誤仍然會向單一的分析服務的地方進行彙報。
2.如果一個組建的繼承或父級從屬鏈路中存在多個 errorCaptured 鉤子,則它們將會被相同的錯誤一一喚起
3.如果此 errorCaptured 鉤子自身丟擲了一個錯誤,則這個新錯誤和原本被捕獲的錯誤都會發送給全域性的 config.errorHandler
4.一個 errorCaptured 鉤子能夠返回 false 以阻止錯誤繼續向上傳播。本質上是說’這個錯誤已經被搞定且應該被忽略‘。他會阻止其他任何會被這個錯誤喚起的 errorCaptured 鉤子和全域性的 config.errorHandler
四、選項 / 資源
1.directives 自定義指令
2.filters 過濾器
3.components 元件
directives、filters、components 詳情在這裡有介紹 vue API 知識點(1)---全域性 API 總結
五、選項 / 組合
1.parent
指定已建立的例項之父示例,在兩者之間建立父子關係。子例項可以用 this.$parent 訪問父例項,子例項被推入到父例項的 $children 陣列中
我們在開發中,基本上不會使用到 $parent 和 $children 。更多的是使用 props 和 events 實現父子元件通訊,
2.mixins 混入
3.extends
允許宣告擴充套件另一個元件,而無需使用 Vue.extend。這主要是為了便於擴充套件單檔案元件
這和 mixins 有點類似
mixins、extends 在這篇文章中有詳細的介紹 vue API 知識點(1)---全域性 API 總結
4.provide / inject
provide 和 inject 主要在開發高階外掛/元件庫時使用。並不推薦用於普通應用程式程式碼中。
這對選項需要一起使用,以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在其上下游關係成立的時間裡始終生效。
解析:就是元件的引入層次過多,我們的子孫元件想要獲取祖先元件的資源,可以不使用 props 的方式依次傳遞給子孫元件,層次太多,程式碼結構容易混亂。那麼就可以使用 provide/inject 來做傳遞
官方註解
provide 選項應該是一個物件或返回一個物件的函式。該物件包含可注入其子孫的 property。在該物件中你可以使用 Symbols 作為key,但是隻在原生支援 Symbol 和 Reflect.ownKeys 的環境下可工作
inject 選項應該是一個字串陣列或一個物件,物件的key是本地的繫結名,
value 是 在可用的注入內容中搜索用的 key(字串或 Symbol),或一個物件,該物件的
from property 是在可用的諸如內容中搜索用的 key(字串或 Symbol)
default property 是降級情況下使用的 value
個人解析
provide 是一個物件,或者是一個返回物件的函式,裡面就包含要給子孫後代的東西,也就是屬性和屬性值
inject 一個字串陣列,或者是一個物件。屬性值可以是一個物件,包含 from 和 default 預設值
const Child = { inject: { foo: { from: 'bar', default: 'foo' } } }
from 表示在可用的注入內容中搜索用的 key,default 當然就是預設值
注意:provide 和 inject 繫結並不是可響應的。這是刻意為之的,然而,如果你傳入了一個可監聽的物件,那麼其物件的 property 還是可響應的
官方示例
// 父元件 var Provider = { provide: { name: 'zhangning' }, // ... } // 子元件注入 var Child = { inject: ['name'], created() { console.log(this.name) // => 'zhangning' } }
利用 es 中的 Symbols、函式 provide 和物件 inject
const a = Symbol(); const Parent = { provide(){ return { [a]: 'zhangning187' } } } const Child = { inject: { a }, // ... }
在新版本中,使用一個注入的值作為一個 property 的預設值
const Child = { inject: ['name'], props: { bar: { default() { return this.name } } } }
使用一個注入的值作為資料入口
const Child = { inject: ['name'], data() { return { bar: this.name } } }
如果它需要從一個不同名字的 property 注入,則使用 from 來表示其源 property
const Child = { inject: { from: 'bar', default: 'name' } }
與 prop 的預設值類似,你需要對非原始值使用一個工廠方法
const Child = { inject: { name: { from: 'bar', default: () => [1, 2, 3] } } }
在日常的開發中,我們經常會使用 Vuex 做狀態管理,但是 vuex 有時候太過於繁瑣。如果我們不想使用 vuex,這個時候我們就可以使用 provide/inject 這個方式來代替vuex,在跟元件中傳入變數,然後在後代元件中使用即可
// 在跟元件中提供一個非響應式變數給後代元件
export default { provide() { return { text: 'zhangning' } } } // 後代元件注入 export default { inject: ['text'], created() { this.text = 'zhangning187'// 在我們使用 text 的時候它依然是 zhangning,而不是zhangning187 } }
上面已經講過,provide 和 inject 繫結並不是可響應的,這是可以為之。當然我們也可以傳入一個可響應的物件,那麼它的屬性也就是可響應的了
也就是說,Vue 不會對 provide 中的變數進行響應式處理。所以要想 inject 接受的變數是響應式的,provide 提供的變數本身就需要是響應式的。
由於元件內部的各種狀態就是可響應式的,所以我們直接在根元件中將元件本身注入 provide,此時,我們可以在後代元件中任意訪問根元件中的所有狀態,根元件就成為了全域性狀態的容器
// 根元件提供將自身提供給後代元件 export default { provide() { return { app: this } }, data() { return { text: 'zhangning' } } } // 後代元件 注入 export default { inject: ['app'], data(){ return{} }, created: { this.app.text = 'zhangning187'// 此時使用 text,它的值就是zhangning187 } }
當然,我們也可以通過 $root 來獲取根節點,但是在團隊開發的過程中,如果所有的全域性變數都統一定義在根元件中並不合適,而使用 provide/inject 不同模組的入口元件傳給各自的後代元件可以完美解決這個問題
Vuex 和 provide/inject 區別在於,Vuex 中的全域性狀態的每次修改都是可以追蹤回溯的,而 provide/inject 中變數的修改是無法控制的,通俗說就是,你不知道是哪個元件修改了這個全域性狀態。
provide/inject 破壞了我們的單向資料流原則。如果多個後代元件同時依賴於一個祖先元件提供的狀態,那麼只要有一個元件修改了這個狀態,則所有元件都會受到影響。這個使耦合度增加了,讓我們的資料變化不可控,在多人的開發過程中,這個可能會變得特別混亂。
以上看起來使用 provide/inject 做全域性狀態管理好像很危險,所以我們要謹慎使用這個方式。
但是在元件開發的時候,vue 官方提倡我們使用這種方法。例如 elment-ui
六、選項 / 其他
1.name
只有作為元件選項時起作用
允許元件模板遞迴地呼叫自身,注意,元件在全域性用 Vue.component() 註冊時,全域性 ID 自動作為元件的 name
指定 name 選項的好處就是便於除錯,有名字的元件有更友好的警告資訊,當在 vue-devtools 下,未命名元件將顯示成<AnonymousComponent>,這很沒有語義,通過提供 name 選項,可以獲得更有語義資訊的元件樹
2.delimiters
瞭解一下就行,通常不會去更改插入分隔符
型別 Array<string>
預設值 ["{{", "}}"]
限制 這個選項只在完整構建版本中的瀏覽器內編譯時可用
改變純文字插入分隔符
示例
new Vue({ delimiters: ["${", "}"] }) // 分隔符變成了 ES6 模板字串的風格
3.functional
瞭解一下,通常用不到
型別 Boolean
使元件組狀態(沒有 data)和無例項(沒有 this 上下文)。他們用一個簡單的 render 函式返回虛擬節點,是他們渲染的代價更小
4.model
允許一個自定義元件在使用 v-model 時定製 prop 和 event。預設情況下,一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event,但是一下輸入型別比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突
// 定義一個元件
Vue.component('my-check', { model: { prop: 'checked', event: 'change' }, props: { value: String, checked: { type: Number, default: 0 } } })
使用
<my-check v-model='foo' value='some value'></my-check>
以上程式碼相當於
<my-check :checked='foo' @change='value=>{foo = val}' value='some value'></my-check>
我們先了解一下 input 中的 v-model 是怎麼實現雙向繫結的。
<input type='text' v-model='msg'>
v-model 只是語法糖真正的實現方式
<input type='text' :value='msg' @input='msg=$event.target.value'>
真正的雙向繫結是通過監聽 input 事件
v-model 在內部為不同的輸入元素使用不同的屬性並丟擲不同的事件
text 和 textarea 元素使用 value 屬性和 input 事件
checkbox 和 radio 使用 checked 屬性和 change 事件
select 使用 value 和 change 事件
我們可以自定義輸入框元件的 v-model,雙向繫結
Vue.component('my-input', { template: `<input :value='value' @input='updateValue($event.target.value)' type='text'></input>`, props: ['value'], methods: { updateValue(val) { this.$emit('input', val) } } }) let app = new Vue({ el: '#app', data(){ message: '' }, methods: { handleInput(val) { this.message = val } } })
<div id='app'> <my-input :value='message' @input='handleInput'></my-input> </div>
上面的示例我們可以瞭解到,預設情況下,一個元件上的 v-model 會把 value 用作 prop 且把 input 用作 event,所以當我們在一個自定義元件上使用 v-model 並不能實現雙向繫結,因為自定義的元件並沒有預設的 value 和 input 事件,在使用時,我們需要按照上面那樣顯式的去宣告定義這些東西,這時,選項 model 就派上用場了,在定義元件的時候指定 prop 的值和監聽的事件(看到這裡,上面寫的官網給出的例子也應該可以看明白了)
舉例
Vue.component('my-input', { model: { prop: 'uname', event: 'handleChange' }, props: { uname: { type: String, default: 'zhangning' } }, methods: { updateVal(val) { this.$emit('handleChange', val) } } })
模板
<template> <div> <input type='text' :value='uname' @input='updateVal($event.target.value)'> </div> </template>
使用元件
<my-input v-model='name' value='some value'></my-input>
等價於
<my-input :uname='name' @handleChange='val=>{foo = val}' value='some value'></my-input>
上面的示例中我們就可以在自定義的元件中使用 v-model 來進行雙向綁定了(多看一下示例就明白了)
&n