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

Validator插件

$

之前寫過一個輕量級數據校驗插件使用非常簡單，你只需要找到form表單節點調用調用Validator 方法即可,就能在文本框中輸入值進行自定校驗。

$

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

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

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

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

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

選項自定義策略處理

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

var

輸出vm.$option：

{

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

Vue構造函數

function

在創建Vue實例的時候你傳遞進來的自定義選項對象會傳遞給this._init這個方法。

Vue

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

mergeOptions

function

先來看看調用mergeOptions的三個參數。

• resolveConstructorOptions - 這個函數的作用是用來獲取當前實例構造者的 options 屬性（注：涉及到組件相關的內容暫時不解釋，在此你可以默認他傳遞是一個純對象）
• options - 自定義選項對象
• vm - Vue實例

mergeOptions 最終返回的是在函數內置的options純對象。 options 所擁有的屬性就是調用mergeField函數傳遞進來的key。

舉個栗子：

你在創建Vue的根實例，并且傳遞了一個自定義選項對象。

var

自定義選項對象會作為實參傳遞給mergeOptions函數的child形參。

for

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

hasOwn是檢測關于組件中父實例中是否key屬性如果有將不會重復的調用mergeField，因為父子組件實例中相同的屬性只需要做一次策略處理就可以了。（注：不擴展講解）

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

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

var

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

defaultStrat 默認策略函數

var

默認策略函數要弄懂它你只需要明白parentVal 、childVal 這兩個參數。

• parentVal 就是在調用strat 傳遞進來的parent[key]，因為我們默認parent為純函數所以parentVal 永遠為undefined。
• childVal 就是在調用strat 傳遞進來的childVal[key]，也就是自定義選項對象中的[key]屬性的值。

strats 自定義策略對象

var

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

var

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

strats

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

function

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

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

舉個栗子：

你在創建Vue的根實例，并且傳遞了一個自定義選項對象。

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

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

Vue

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

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

function

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。