VUE原理以及簡單實現(xiàn)

muddyway 發(fā)布于2019-08-01 18:13 / 3312人閱讀

摘要：在原理中，最重要的部分就是如何實現(xiàn)數(shù)據(jù)的觀測，依賴的收集，視圖的更新。本文講的就是這三個的簡單實現(xiàn)。這樣做代碼似乎有點丑，我們在設(shè)置屬性觸發(fā)會發(fā)生函數(shù)，有沒有一種更加智能的方式來實現(xiàn)通知變化呢。

在vue原理中，最重要的部分就是如何實現(xiàn)數(shù)據(jù)的觀測，依賴的收集，視圖的更新。本文講的就是Observer, Dep, Watcher這三個的簡單實現(xiàn)。
pub(publish)表示發(fā)布者，sub(subscribe)表示訂閱者, cb(callback)表示回調(diào)函數(shù)
如果你覺得這篇講的對你有所幫助，請幫我點個star

observer的實現(xiàn)

Observer的作用簡單來說就是讓object對象的屬性都用Object.defineProperty()來進行定義，這樣當獲取object的屬性，或者修改屬性的時候，就能夠觸發(fā)get,set達到數(shù)據(jù)的觀測的效果。

class Observer {
    constructor(value) {
        this.value = value 
        this.walk(this.value)
    }
    walk (value) {
        // 遞歸遍歷value的屬性
        Object.keys(value).forEach((key) = > {
            defineReactive(value, key, value[key])
        })
    }
}
function defineReactive(obj, key ,val) {
    let childOb = observe(val)
    Obeject.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            console.log("")
            return val
        },
        set(newVal) {
            console.log("")
            val = newVal
            childOb = observe(val)
        }
    })
}
function observe (value) {
    if (typeof value === "object" && !Array.isArray(value)) {
        value = new Observer(value)
    }
}

defineReactive的作用就是給對象的屬性進行簡單的數(shù)據(jù)觀測，一旦值獲取或者設(shè)置就會觸發(fā)一些行為.因為一個對象的屬性可能還是對象，所以在這里我們添加observe函數(shù)來遍歷值，讓一個對象的屬性的屬性還是可以進行觀測的，簡單呢來說的意思就是讓所有屬性都可以進行忽略。當然在實際情況中，我們還需要考慮數(shù)組的情況，但都大同小異。
這樣做代碼似乎有點丑，我們在設(shè)置屬性觸發(fā)set會發(fā)生console.log()函數(shù)，有沒有一種更加智能的方式來實現(xiàn)通知變化呢。這里我們就需要用消息訂閱器來進行實現(xiàn)，這樣做我們就不需要通過觀察console.log()輸出的值來看進行的情況，我們只需要在set方法里邊加一個通知，一旦值發(fā)生變化，就通知外邊值發(fā)生了改變

Dep的實現(xiàn)：

Dep的作用就是用來收集屬性值的變化，一旦set方法觸發(fā)的時候，就更新視圖。那就準備一個數(shù)組來進行收集吧！
下面是Dep的實現(xiàn)：

class Dep {
    constructor() {
        this.subs = []
    }
    addSub (sub) {
        this.subs.push(sub)
    }
    notify () {
        const subs = this.subs.slice()
        subs.forEach((sub) => {
            sub.update() // 視圖更新
        })
    }
}

上面就是Dep的簡單實現(xiàn)，addSub的作用是增加訂閱者，因為有很多訂閱者，我們需要用一個數(shù)組將它進行存儲，notify()函數(shù)的作用就是當set發(fā)生的時候，進行通知，update()這個函數(shù)待會在watcher中會講到。實現(xiàn)了Dep我們是不是該更改了set()函數(shù)了呢，下面是defineReactive()修改后的代碼

function defineReactive(obj, key ,val) {
    let dep = new Dep() // 畢竟要使用Dep的方法
    let childOb = observe(val)
    Obeject.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            return val
        },
        set(newVal) {
            val = newVal
            childOb = observe(val)
            dep.notify() // 因為數(shù)據(jù)改變了，我們就通知Dep
        }
    })
}

一旦觸發(fā)set，就調(diào)用dep.notify(),notify的作用就是針對訂閱者遍歷進行更新。

Watcher的簡單實現(xiàn)：

watcher的作用，就是當狀態(tài)發(fā)生改變的時候，更新視圖，我們可以假設(shè)

class Watcher {
    constructor (vm, cb, expOrFn) {
        this.vm = vm // 這表示一個Vue的實例
        this.cb = cb
        // 這里需要考慮expOrFn是字符串或者函數(shù)的情況
        // 這里做一個簡化，只考慮函數(shù)的情況
        this.getter = expOrFn
        this.value = this.get()
    }
    get () {
        Dep.target = this 
        const vm = this.vm
        value = this.getter.call(this.vm, vm)
        Dep.target = null
        return value 
    }
    update () {
        this.run()
    }
    run () {
        const value = this.get()
        if (value !== this.value) {
            const oldValue = this.value
            this.value = value
            this.cb.call(this.vm, value, oldValue) 
        }
    }
}

Watcher的簡單實現(xiàn)就完成了，在Dep()構(gòu)造函數(shù)中，我們使用了sub.update()這行代碼，而update函數(shù)是Watcher里邊的方法，說明每一個sub都是Wathcer的實例，問題是我們應(yīng)該如何通過addSub()這個方法，將Watcher加入到subs這個數(shù)組中盡心存儲呢，答案還是在defineReactive()里邊進行修改

function defineReactive(obj, key ,val) {
    let dep = new Dep() // 畢竟要使用Dep的方法
    let childOb = observe(val)
    Obeject.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            if(Dep.target) {
                dep.addSub(Dep.target)
            }
            return val
        },
        set(newVal) {
            val = newVal
            childOb = observe(val)
            dep.notify() // 因為數(shù)據(jù)改變了，我們就通知Dep
        }
    })
}

這樣是不是就實現(xiàn)了往Dep里邊加Watcher了，vue源碼中比這個復(fù)雜的多，各種參數(shù)，看著頭大。本文的宗旨就是通過簡化讓你了解內(nèi)部原理，如果需要更深入了解就需要閱讀源碼了。

GPU云服務(wù)器云服務(wù)器 VUE實現(xiàn)webrtc Vue實現(xiàn)分頁 vue+webrtc實現(xiàn)實時視頻通話,語音通話隊列實現(xiàn)原理

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51579.html

發(fā)表評論

登陸后可評論

0條評論

muddyway

男|高級講師

我要關(guān)注我要私信

TA的文章

一文講透自適應(yīng)熔斷的原理和實現(xiàn)

閱讀 2385·2021-11-18 10:07
虛擬主機業(yè)務(wù)是什么意思-虛擬主機管理系統(tǒng)，是干嘛的？

閱讀 2336·2021-09-22 15:59
SpartanHost：西雅圖高防KVM八折月付4美元起,1G內(nèi)存,15GB NVMe硬盤,2TB/

閱讀 3095·2021-08-23 09:42
前端每日實戰(zhàn) 2018年10月至2019年6月項目匯總（共 20 個項目）

閱讀 2296·2019-08-30 15:44
你不可錯過的前端面試題(二)

閱讀 1208·2019-08-29 15:06
zoom和transform:scale()的區(qū)別

閱讀 2335·2019-08-29 13:27
前端文檔收集

閱讀 1229·2019-08-29 13:21
前端程序員需要掌握的幾個專業(yè)“詞語”

閱讀 1431·2019-08-29 13:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

VUE原理以及簡單實現(xiàn)

相關(guān)文章

**前端路由簡介以及vue-router實現(xiàn)原理**

前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

前端面試題大集合：來自真實大廠的532道面試題(只有題，沒有答案)

Vue面試題精選：Vue原理以及雙向數(shù)據(jù)綁定的實戰(zhàn)過程

發(fā)表評論

0條評論

muddyway

男|高級講師

TA的文章

一文講透自適應(yīng)熔斷的原理和實現(xiàn)

虛擬主機業(yè)務(wù)是什么意思-虛擬主機管理系統(tǒng)，是干嘛的？

SpartanHost：西雅圖高防KVM八折月付4美元起,1G內(nèi)存,15GB NVMe硬盤,2TB/

前端每日實戰(zhàn) 2018年10月至2019年6月項目匯總（共 20 個項目）

你不可錯過的前端面試題(二)

zoom和transform:scale()的區(qū)別

前端文檔收集

前端程序員需要掌握的幾個專業(yè)“詞語”

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

VUE原理以及簡單實現(xiàn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！