我"崩"不住了，在彭凡同志鍥而不舍的催促下這篇文章終于"蛋"生了。 說正經(jīng)的這篇文章不好寫，不好寫的原因是我不太擅長寫這些類比文,但它還是寫出來了。 相信大部分人都有開發(fā)過功能插件，在寫插件的時(shí)候普遍應(yīng)用基本思想是以"默認(rèn)配置為優(yōu)先，以用戶配置為覆蓋"。如果你覺得簡單先別著急穿褲子走人繼續(xù)往下看看。

Validator插件

$

之前寫過一個輕量級數(shù)據(jù)校驗(yàn)插件使用非常簡單，你只需要找到form表單節(jié)點(diǎn)調(diào)用調(diào)用Validator 方法即可,就能在文本框中輸入值進(jìn)行自定校驗(yàn)。

$

當(dāng)然也會給用戶相對的自由度如"校驗(yàn)事件、錯誤提示信息 ..."你只需要按照規(guī)定來配置就好了。

*********************分割線**********************

在寫Vue代碼的小伙伴同樣要寫很多的選項(xiàng)："el、data、props、template、render、mounted..." 那Vue在處理這些選項(xiàng)也是使用"非黑即白"的處理思想嗎？明確的說沒有 Vue 在處理選項(xiàng)有非常多限制如：

• el 只在用 new 創(chuàng)建實(shí)例時(shí)生效。
• data 組件的定義只接受function。
• 直接在 DOM中使用組件時(shí)，組件名只有是 kebab-case 才有效。
• 生命周期鉤子...

也就是說在Vue 中"非黑即白"的思想并不適用，Vue需要針對特殊選項(xiàng)做不同的處理，有的選項(xiàng)處理邏輯是再此能不能用，有的選項(xiàng)處理邏輯是校驗(yàn)Value合法性，有的選項(xiàng)的邏輯是需要合并處理。.... 這種處理方式比較官方的說法叫"選項(xiàng)自定義策略處理"。

選項(xiàng)自定義策略處理

在講選擇自定義策略處理之前先說說vm.$option實(shí)例屬性，它是用于當(dāng)前 Vue 實(shí)例的初始化選項(xiàng)。需要在選項(xiàng)中包含自定義屬性時(shí)會有用處：

var

輸出vm.$option：

{

有沒有感覺奇怪在實(shí)例初始化選項(xiàng)中data的值是一個對象，為什么vm.$option中data的值變成一個函數(shù)了？開始揭秘...

Vue構(gòu)造函數(shù)

function

在創(chuàng)建Vue實(shí)例的時(shí)候你傳遞進(jìn)來的自定義選項(xiàng)對象會傳遞給this._init這個方法。

Vue

vm.$options 屬性定義在Vue.prototype._init 原型方法中。 vm.$options的值是調(diào)用mergeOptions函數(shù)的返回值。

mergeOptions

function

先來看看調(diào)用mergeOptions的三個參數(shù)。

• resolveConstructorOptions - 這個函數(shù)的作用是用來獲取當(dāng)前實(shí)例構(gòu)造者的 options 屬性（注：涉及到組件相關(guān)的內(nèi)容暫時(shí)不解釋，在此你可以默認(rèn)他傳遞是一個純對象）
• options - 自定義選項(xiàng)對象
• vm - Vue實(shí)例

mergeOptions 最終返回的是在函數(shù)內(nèi)置的options純對象。 options 所擁有的屬性就是調(diào)用mergeField函數(shù)傳遞進(jìn)來的key。

舉個栗子：

你在創(chuàng)建Vue的根實(shí)例，并且傳遞了一個自定義選項(xiàng)對象。

var

自定義選項(xiàng)對象會作為實(shí)參傳遞給mergeOptions函數(shù)的child形參。

for

通過for..in.. 語句把child對象上可枚舉的屬性名作為參數(shù)傳遞給mergeField。

hasOwn是檢測關(guān)于組件中父實(shí)例中是否key屬性如果有將不會重復(fù)的調(diào)用mergeField，因?yàn)楦缸咏M件實(shí)例中相同的屬性只需要做一次策略處理就可以了。（注：不擴(kuò)展講解）

當(dāng)前栗子中"el"、"data"、"count" 這三個屬性名作為字符串會作為參數(shù)傳遞給mergeField函數(shù)。那在mergeField函數(shù)中會給options 擴(kuò)展 options.el = undefined 、 options.data = undefined 、 options.count = undefined 三個屬性，為什么這三個屬性的值都是undefined的呢？

原因是他們的value都需要通過調(diào)用 strat(parent[key], child[key], vm, key) 函數(shù)返回值來確定所以都暫定undefined，那strat 是什么？

var

strats是自定義策略對象，strats[key]是檢測在這個自定義策略對象上有沒有[key]這個屬性，如果有就表示針對[key]屬性寫了策略函數(shù)反之就沒寫。

defaultStrat 默認(rèn)策略函數(shù)

var

默認(rèn)策略函數(shù)要弄懂它你只需要明白parentVal 、childVal 這兩個參數(shù)。

• parentVal 就是在調(diào)用strat 傳遞進(jìn)來的parent[key]，因?yàn)槲覀兡J(rèn)parent為純函數(shù)所以parentVal 永遠(yuǎn)為undefined。
• childVal 就是在調(diào)用strat 傳遞進(jìn)來的childVal[key]，也就是自定義選項(xiàng)對象中的[key]屬性的值。

strats 自定義策略對象

var

strats 是獲取了config 全局配置對象上optionMergeStrategies屬性的值。

var

你是不是覺得奇怪為什么不直接通過字面量方式創(chuàng)建一個純對象賦值給strats，而要通過Object.create(null)創(chuàng)建純對象。這樣不麻煩了嗎? 問題暫時(shí)保留。往下看Vue中自定義的策略函數(shù)。

strats

可以看到Vue中對"el", "data","watch","props"等等....選項(xiàng)都寫了策略函數(shù)。 在回歸到mergeField函數(shù)你是否能頓悟了。

function

如果某個選項(xiàng)寫了策略函數(shù)那么就會調(diào)用這個策略函數(shù)，返回值會成為options[key] 的value。最后：mergeOptions 函數(shù)執(zhí)行完畢返回options引用給到vm.$options。

現(xiàn)在來解釋剛剛的那個問題。為什么不直接通過字面量方式創(chuàng)建一個純對象賦值給strats，而要通過Object.create(null)創(chuàng)建純對象？原因是Vue想給用戶自定義選項(xiàng)自由度，也能添加策略函數(shù)。

舉個栗子：

你在創(chuàng)建Vue的根實(shí)例，并且傳遞了一個自定義選項(xiàng)對象。

var vm = new Vue({el: "#app",data: {message: "hello Vue",},count: 9, })

我想針對count寫個添加策略函數(shù)怎么辦。

Vue

這個策略函數(shù)很簡單，監(jiān)聽childVal的值: 如果大于99返回本身，小于99 返回99。count策略函數(shù)返回值給到vm.$options.count。

那Vue.config是怎么訪問到的呢？

function

你細(xì)品這個代碼。 看不懂留言請相信我一定會假裝看不見。

總結(jié)

以上是生活随笔為你收集整理的vue中rules校验是验证首字符_小白也能秒懂Vue源码中那些精细设计（选项处理）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。