elementUI使用本地變量進行驗證，監測不到本地變量的變化 的問題

對於餓了麼組件自定義驗證規則，組件庫文檔已經很是詳細了：http://element-cn.eleme.io/#/zh-CN/component/form

 我這裏將驗證中固定的值提取出來使用變量進行保存，方便後面維護。

像下面這種寫法，若是maxUrlCount保持不變，是沒有問題的

 

可是，若是我頁面或者代碼裏更改了maxUrlCount，此時驗證中獲取到的值仍是初始定義的值，並不會監測到改變後的值。

解決方案： 把驗證函數也提取出來，以下面這樣：

 

 

------------------------------------------------------------------------------------ 緣由解析 ---------------------------------------------------------------------------------------------------------------

這裏主要是由於this指針的緣由

1. 若是這樣寫

此時的this指向調用validator函數的對象，element這裏會用一個驗證相關的對象：因此打印出來是undefined

2. 若是是使用的箭頭函數

或者 

此時箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，而是指向了當前組件定義的類的實例；由於該類繼承了Vue,因此初始化時會複製一份要讀取的變量（this.maxUrlCount）;可是this.maxUrlCount的改變的是Vue實例上的該屬性，並無改變當前類的實例屬性；因此致使監測不到變量變化。

我這裏使用的是ts的class語法，具體實現原理參見：https://zhuanlan.zhihu.com/p/48371638

3. 最後，也就是正確的寫法：

 此時this指向 Vue 實例，可以正確監聽到變量變化