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

資訊專欄INFORMATION COLUMN

Vue.js響應(yīng)式原理

caikeal / 870人閱讀

摘要：關(guān)于是一款框架，上手快速簡(jiǎn)單易用，通過響應(yīng)式在修改數(shù)據(jù)的時(shí)候更新視圖。的響應(yīng)式原理依賴于，尤大大在文檔中就已經(jīng)提到過，這也是不支持以及更低版本瀏覽器的原因。代理我們可以在的構(gòu)造函數(shù)中為執(zhí)行一個(gè)代理。

寫在前面

因?yàn)閷?duì)Vue.js很感興趣，而且平時(shí)工作的技術(shù)棧也是Vue.js，這幾個(gè)月花了些時(shí)間研究學(xué)習(xí)了一下Vue.js源碼，并做了總結(jié)與輸出。
文章的原地址：https://github.com/answershut...。
在學(xué)習(xí)過程中，為Vue加上了中文的注釋https://github.com/answershut...，希望可以對(duì)其他想學(xué)習(xí)Vue源碼的小伙伴有所幫助。
可能會(huì)有理解存在偏差的地方，歡迎提issue指出，共同學(xué)習(xí)，共同進(jìn)步。

關(guān)于Vue.js

Vue.js是一款MVVM框架，上手快速簡(jiǎn)單易用，通過響應(yīng)式在修改數(shù)據(jù)的時(shí)候更新視圖。Vue.js的響應(yīng)式原理依賴于Object.defineProperty，尤大大在Vue.js文檔中就已經(jīng)提到過，這也是Vue.js不支持E8 以及更低版本瀏覽器的原因。Vue通過設(shè)定對(duì)象屬性的 setter/getter 方法來監(jiān)聽數(shù)據(jù)的變化，通過getter進(jìn)行依賴收集，而每個(gè)setter方法就是一個(gè)觀察者，在數(shù)據(jù)變更的時(shí)候通知訂閱者更新視圖。

將數(shù)據(jù)data變成可觀察（observable）的

那么Vue是如何將所有data下面的所有屬性變成可觀察的（observable）呢？

function observer(value) {
    Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))
}

function defineReactive (obj, key, val, cb) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            /*....依賴收集等....*/
        },
        set:newVal=> {
            cb();/*訂閱者收到消息的回調(diào)*/
        }
    })
}

class Vue {
    constructor(options) {
        this._data = options.data;
        observer(this._data, options.render)
    }
}

let app = new Vue({
    el: "#app",
    data: {
        text: "text",
        text2: "text2"
    },
    render(){
        console.log("render");
    }
})

為了便于理解，首先考慮一種最簡(jiǎn)單的情況，不考慮數(shù)組等情況，代碼如上所示。在initData中會(huì)調(diào)用observe這個(gè)函數(shù)將Vue的數(shù)據(jù)設(shè)置成observable的。當(dāng)_data數(shù)據(jù)發(fā)生改變的時(shí)候就會(huì)觸發(fā)set，對(duì)訂閱者進(jìn)行回調(diào)（在這里是render）。

那么問題來了，需要對(duì)app._date.text操作才會(huì)觸發(fā)set。為了偷懶，我們需要一種方便的方法通過app.text直接設(shè)置就能觸發(fā)set對(duì)視圖進(jìn)行重繪。那么就需要用到代理。

代理

我們可以在Vue的構(gòu)造函數(shù)constructor中為data執(zhí)行一個(gè)代理proxy。這樣我們就把data上面的屬性代理到了vm實(shí)例上。

_proxy(options.data);/*構(gòu)造函數(shù)中*/

/*代理*/
function _proxy (data) {
    const that = this;
    Object.keys(data).forEach(key => {
        Object.defineProperty(that, key, {
            configurable: true,
            enumerable: true,
            get: function proxyGetter () {
                return that._data[key];
            },
            set: function proxySetter (val) {
                that._data[key] = val;
            }
        })
    });
}

我們就可以用app.text代替app._data.text了。

關(guān)于

作者：染陌

Email：[email protected] or [email protected]

Github: https://github.com/answershuto

Blog：http://answershuto.github.io/

知乎專欄：https://zhuanlan.zhihu.com/ranmo

掘金： https://juejin.im/user/58f87ae844d9040069ca7507

osChina：https://my.oschina.net/u/3161824/blog

轉(zhuǎn)載請(qǐng)注明出處，謝謝。

歡迎關(guān)注我的公眾號(hào)

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

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

相關(guān)文章

  • Vue 數(shù)據(jù)響應(yīng)式原理

    摘要：接下來，我們就一起深入了解的數(shù)據(jù)響應(yīng)式原理，搞清楚響應(yīng)式的實(shí)現(xiàn)機(jī)制。回調(diào)函數(shù)只是打印出新的得到的新的值，由執(zhí)行后生成。及異步更新相信讀過前文，你應(yīng)該對(duì)響應(yīng)式原理有基本的認(rèn)識(shí)。 前言 Vue.js 的核心包括一套響應(yīng)式系統(tǒng)。 響應(yīng)式，是指當(dāng)數(shù)據(jù)改變后，Vue 會(huì)通知到使用該數(shù)據(jù)的代碼。例如，視圖渲染中使用了數(shù)據(jù)，數(shù)據(jù)改變后，視圖也會(huì)自動(dòng)更新。 舉個(gè)簡(jiǎn)單的例子，對(duì)于模板： {{ name ...

    Mike617 評(píng)論0 收藏0

  • vue - 響應(yīng)式原理梳理(一)

    摘要：?jiǎn)栴}為什么修改即可觸發(fā)更新和的關(guān)聯(lián)關(guān)系官方介紹的官網(wǎng)文檔，對(duì)響應(yīng)式屬性的原理有一個(gè)介紹。因此本文在源碼層面，對(duì)響應(yīng)式原理進(jìn)行梳理，對(duì)關(guān)鍵步驟進(jìn)行解析。 描述 ?我們通過一個(gè)簡(jiǎn)單的 Vue應(yīng)用 來演示 Vue的響應(yīng)式屬性： html： {{message}} js: let vm = new Vue({ el: #ap...

    weknow619 評(píng)論0 收藏0

  • [Vue.js進(jìn)階]從源碼角度剖析計(jì)算屬性的原理

    摘要：前言最近在學(xué)習(xí)計(jì)算屬性的源碼，發(fā)現(xiàn)和普通的響應(yīng)式變量?jī)?nèi)部的實(shí)現(xiàn)還有一些不同，特地寫了這篇博客，記錄下自己學(xué)習(xí)的成果文中的源碼截圖只保留核心邏輯完整源碼地址可能需要了解一些響應(yīng)式的原理版本計(jì)算屬性的概念一般的計(jì)算屬性值是一個(gè)函數(shù)，這個(gè)函數(shù)showImg(https://user-gold-cdn.xitu.io/2019/5/6/16a8b98f1361f6f6); 前言 最近在學(xué)習(xí)Vue計(jì)...

    melody_lql 評(píng)論0 收藏0

  • vue.js響應(yīng)式原理解析與實(shí)現(xiàn)

    摘要：今天，就我們就來一步步解析響應(yīng)式的原理，并且來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的。當(dāng)然，這個(gè)也只是一個(gè)簡(jiǎn)單的，來說明響應(yīng)式的原理，真實(shí)的源碼會(huì)更加復(fù)雜，因?yàn)榧恿撕芏嗥渌壿?。接下來我可能?huì)將其與聯(lián)系起來，實(shí)現(xiàn)和語法。 從很久之前就已經(jīng)接觸過了angularjs了，當(dāng)時(shí)就已經(jīng)了解到，angularjs是通過臟檢查來實(shí)現(xiàn)數(shù)據(jù)監(jiān)測(cè)以及頁面更新渲染。之后，再接觸了vue.js，當(dāng)時(shí)也一度很好奇vue.js是如何監(jiān)...

    Shihira 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<