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

Panda 發(fā)布于2019-08-22 11:18 / 1716人閱讀

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

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

observer的實(shí)現(xiàn)

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

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

Dep的實(shí)現(xiàn)：

Dep的作用就是用來收集屬性值的變化，一旦set方法觸發(fā)的時(shí)候，就更新視圖。那就準(zhǔn)備一個(gè)數(shù)組來進(jìn)行收集吧！
下面是Dep的實(shí)現(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的簡單實(shí)現(xiàn)，addSub的作用是增加訂閱者，因?yàn)橛泻芏嘤嗛喺?，我們需要用一個(gè)數(shù)組將它進(jìn)行存儲(chǔ)，notify()函數(shù)的作用就是當(dāng)set發(fā)生的時(shí)候，進(jìn)行通知，update()這個(gè)函數(shù)待會(huì)在watcher中會(huì)講到。實(shí)現(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() // 因?yàn)閿?shù)據(jù)改變了，我們就通知Dep
        }
    })
}

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

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

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

class Watcher {
    constructor (vm, cb, expOrFn) {
        this.vm = vm // 這表示一個(gè)Vue的實(shí)例
        this.cb = cb
        // 這里需要考慮expOrFn是字符串或者函數(shù)的情況
        // 這里做一個(gè)簡化，只考慮函數(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的簡單實(shí)現(xiàn)就完成了，在Dep()構(gòu)造函數(shù)中，我們使用了sub.update()這行代碼，而update函數(shù)是Watcher里邊的方法，說明每一個(gè)sub都是Wathcer的實(shí)例，問題是我們應(yīng)該如何通過addSub()這個(gè)方法，將Watcher加入到subs這個(gè)數(shù)組中盡心存儲(chǔ)呢，答案還是在defineReactive()里邊進(jìn)行修改

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() // 因?yàn)閿?shù)據(jù)改變了，我們就通知Dep
        }
    })
}

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

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Panda

男|高級(jí)講師

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

TA的文章

云主機(jī)有什么用-云主機(jī)有什么好處？

閱讀 1848·2021-09-22 15:23
第2期ARM裸機(jī)篇：【1】開發(fā)環(huán)境搭建8_MobaXterm軟件安裝和使用

閱讀 3289·2021-09-04 16:45
Ubuntu系統(tǒng)安裝Fail2ban防止SSH端口被暴力破解

閱讀 1920·2021-07-29 14:49
記錄下css的小知識(shí)，不時(shí)更新

閱讀 2783·2019-08-30 15:44
瀏覽器如何解析html、css、js

閱讀 1531·2019-08-29 16:36
帶你玩轉(zhuǎn)css3的3D！

閱讀 1055·2019-08-29 11:03
CSS自定義屬性+CSS Grid網(wǎng)格實(shí)現(xiàn)超級(jí)的布局能力

閱讀 1524·2019-08-26 13:53
5分鐘實(shí)現(xiàn)一個(gè)Koa

閱讀 517·2019-08-26 11:57

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

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評(píng)論

0條評(píng)論

Panda

男|高級(jí)講師

TA的文章

云主機(jī)有什么用-云主機(jī)有什么好處？

第2期ARM裸機(jī)篇：【1】開發(fā)環(huán)境搭建8_MobaXterm軟件安裝和使用

Ubuntu系統(tǒng)安裝Fail2ban防止SSH端口被暴力破解

記錄下css的小知識(shí)，不時(shí)更新

瀏覽器如何解析html、css、js

帶你玩轉(zhuǎn)css3的3D！

CSS自定義屬性+CSS Grid網(wǎng)格實(shí)現(xiàn)超級(jí)的布局能力

5分鐘實(shí)現(xiàn)一個(gè)Koa

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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