【Vue原理】VModel - 源碼版之 select 詳解

時間 2019-11-08

標籤 Vue原理 vmodel 源碼 select 詳解简体版

原文原文鏈接

寫文章不容易，點個讚唄兄弟
專一 Vue 源碼分享，文章分爲白話版和源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧
研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者拉到下面關注公衆號也能夠吧node

【Vue原理】VModel - 源碼版之 select 詳解數組

今天咱們來看看 v-model 處理 select 有什麼特殊的地方dom

前面已經有三篇說明VModel了函數

【Vue原理】VModel - 白話版學習

【Vue原理】VModel - 源碼版之表單元素綁定流程 spa

【Vue原理】VModel - 源碼版之input詳解 3d

經過第一篇源碼分享，咱們就知道 Vue是經過設置 select 的 selectedIndex 來控制選項的，code

哈哈，如今咱們就是來分析究竟是怎麼設置 selectedIndex 的component

好的，咱們必定要帶着問題進行學習，這樣學完纔有用blog

一、Vue 如何設置 selectedIndex

二、Vue 在哪裏設置 selectedIndex

Vue 如何設置 selectedIndex

Vue 是經過一個 setSelected 的方法專門來設置 selectedIndex 的，咱們來看下源碼

function setSelected(el, binding, vm) {   

    var selected, option;   
 
    for (var i = 0, l = el.options.length; i < l; i++) {
        option = el.options[i];   
        if (isMultiple) {
            selected = value.indexOf(option) > -1;  
            if (option.selected !== selected) {
                option.selected = selected;
            }
        } 

        else {            
            if (option.value == value) {                
                if (el.selectedIndex !== i) {
                    el.selectedIndex = i;
                }               
                return
            }
        }
    } 
   
    if (!isMultiple) {
        el.selectedIndex = -1;
    }

}

兩處會修改 selectedIndex 的地方我已經加紅加粗

簡單解釋下 setSelected 的做用

一、綁定值沒法匹配任何option 時，設置 selectedIndex =-1，而後select 就會顯示空

舉栗子

select 的 selectedIndex 是-1，而後選擇框內顯示空

二、選擇時，若是多個options 值相等時，只取第一個相等項

舉栗子
三個選項的 value 都同樣

哈哈，我明明選了3，可是顯示1，這就是 Vue 作的處理，多個相同值的選擇，只去第一個

可是這個也是有條件的，必須在 value 變化的時候，纔會進行更新，因而纔會有判斷操做

好比如今select 的value是 1，你再選擇一個也是 1 的其餘選項，Vue 就不會更新，也就不會判斷，你選了就選了，無論你了

看圖，初始化 select value 爲空，而後選擇 value 是1 的第三個選項，

哦豁，忽然變成第一個選項了

而我再選擇 3 和 2 的時候，卻不會變成第一個選項，所以 3 和2 的 value 都是 1，value 沒有變化，select 不會更新

三、選擇後，options 變化，會根據以前的選擇，更新它在options的位置

options 改變了，而後把 1 的位置變成最後一個，而後 Vue 就會相應地把 selectedIndex 的位置更新爲新options 中對應的位置

在哪裏設置 selectedIndex

Vue 會在 v-model 的兩個鉤子函數中更新 select 的 selectedIndex

inserted

當dom被插入到頁面中後，會觸發這個鉤子函數

上一篇詳解input咱們已經能知道，inserted 會處理select

看下 inserted 源碼（只有select 處理部分）

function inserted(el, binding, vnode, oldVnode) {    

    if (vnode.tag === 'select') {

        // 設置 select 的selectedIndex 初始值
        setSelected(el, binding, vnode.context);

        // 把options 的value，全都保存到一個數組
        el._vOptions = 
            [].map
            .call(el.options, function(o){
                return o.value
            });
    }
}

componentUpdated

當組件更新完畢以後，觸發這個鉤子

這個鉤子函數只針對 select 處理

上 componentUpdated 鉤子函數源碼

function componentUpdated(el, binding, vnode) {    

    if (vnode.tag === 'select') {

        setSelected(el, binding, vnode.context);     

        // 這是以前保存的 舊 的 options 的 全部 value 的數組 好比[ 1,2,3]
        var prevOptions = el._vOptions;   

        // 拿到 如今全部 option 的value 存到數組
        var curOptions = el._vOptions = [].map.call(el.options, getValue);   

        // 當 options 變化，並且跟舊option 每一個都不同
        if (curOptions.some(function(o, i) {            
            return ! (o==prevOptions[i])
        })) {  

            var needReset = el.multiple ? 

            binding.value.some(function(v) {       
                 return hasNoMatchingOption(v, curOptions);
            }) :   

            // 綁定值變化了，並且綁定值 匹配不到 options
            // hasNoMatchingOption 是匹配 某個值是否在數組中 
            binding.value !== binding.oldValue 
            && hasNoMatchingOption(binding.value, curOptions);  

            if (needReset) {
                trigger(el, 'change');
            }
        }
    }

看源碼，這個鉤子大概作了兩件事

一、當即更新 selectedIndex

爲何要當即更新，怕 options 改變了，而 select.selectedIndex 沒有變，致使對應上了新options 的 index 項，上錯花轎嫁對郎

[ 1,2,3 ] 選擇了第3項，而後 index=2，值是3

而後 options 數據改變了，變成了 [7,8,9]，而 index 仍是2，而顯示值變成了 9

很明顯這不符合邏輯啊，必須每次組件更新都要更新selectedIndex