這篇文章給大家介紹怎么深入了解vue中的v-model，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供紅塔企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、html5、小程序制作等業(yè)務(wù)。10年已為紅塔眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

首先，要明白我們學(xué)習(xí)v-model的作用是什么

一個(gè)組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復(fù)選框等類型的輸入控件可能會(huì)將 value attribute 用于不同的目的。model 選項(xiàng)可以用來避免這樣的沖突  ---這是在vue官網(wǎng)找到的解答。

其次，是我們要知道v-model的本質(zhì)以及他的實(shí)現(xiàn)原理是什么

在我看來v-model本身就是一個(gè)語法糖，實(shí)際上就是給我們提供了一個(gè)vue的內(nèi)置指令，通過這樣的方式既簡(jiǎn)化了我們的代碼也能讓我們明白這個(gè)命令應(yīng)該怎么去使用

使用v-model指令能夠讓我們直接獲取到我們?cè)趇nput框里面輸入的內(nèi)容，將輸入的內(nèi)容保存到我們的data數(shù)據(jù)里面，當(dāng)input的value值發(fā)生改變的時(shí)候就會(huì)自動(dòng)更新data數(shù)據(jù)同時(shí)也會(huì)使相應(yīng)的視圖進(jìn)行更新渲染。

  <div class="about">
    <p>{{model}}</p>
    <!-- v-model -->
    <input type="text" v-model="model"> 
  </div>
</template>
<script>
export default {
  data() {
    return {
      model:'',
    }
  },
}
</script>

雙向綁定MVVM他的原理其實(shí)就是監(jiān)聽數(shù)據(jù)當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候繼而更新頁面視圖。

MVVM流程圖

下圖就是雙向綁定的原理，通過數(shù)據(jù)劫持以及模板解析通過一步步流程來監(jiān)聽我們的數(shù)據(jù)更新視圖

Observer數(shù)據(jù)劫持相關(guān)代碼

Observer其實(shí)就是個(gè)觀察者 他通過循環(huán)遍歷來監(jiān)聽我們data數(shù)據(jù)中的每一項(xiàng)，當(dāng)data數(shù)據(jù)發(fā)生改變的時(shí)候，就會(huì)通過notify方法派發(fā)更新給訂閱者，同時(shí)進(jìn)行Compile進(jìn)行我們的文本編譯從而實(shí)現(xiàn)部分視圖進(jìn)行更新。

class Observe {
    constructor(vm) {
        this.walk(vm.data)
    }
    // 循環(huán)遍歷 讓 data 里每一個(gè)key 都監(jiān)聽 
    walk(data) {
        Object.keys(data).forEach( key => {
            this.defineReactive(data, key, data[key])
        })
    }

    // 定義響應(yīng)式  這個(gè)函數(shù)也是響應(yīng)式的核心函數(shù)
    defineReactive(data, key, value) {
        let dep = new Dep()
        Object.defineProperty(data, key, {
            get() {
                console.log('觸發(fā) get 收集依賴');
                // 收集依賴
                if( Dep.target ) {
                    // 添加訂閱者
                    dep.addSub(Dep.target)
                }
                return value
            },
            set(newValue) {
                console.log(value, '觸發(fā) set 派發(fā)更新');
                // 新值覆蓋舊值
                value = newValue
                // 派發(fā)更新
                dep.notify()
            },
        })
    }
}

Watcher視圖更新

Watcher就是我們的訂閱者，通過update方法進(jìn)行視圖的更新

    constructor(vm, exp, cb ) {
        this.vm = vm;
        this.exp = exp;
        this.cb = cb;
        this.value = this.get()
    }
    // 更新
    update() {
        this.run()
    }
    // 更新 DOM
    run() {
        const value = this.get()
        // 新舊值進(jìn)行比對(duì)
        if( value !== this.value ) {
            // 調(diào)用回調(diào)函數(shù) 
            this.cb.call(this.vm, value)
        }
    }

    // 收集依賴
    get() {
        Dep.target = this
        let value = this.vm.data[this.exp]
        Dep.target = null;
        return value
    }
}

關(guān)于怎么深入了解vue中的v-model就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁標(biāo)題：怎么深入了解vue中的v-model
本文URL：http://www.chinadenli.net/article4/gpdhie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)公司、小程序開發(fā)、虛擬主機(jī)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)