亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    深入探討Vue中數(shù)據(jù)雙向綁定的原理及實(shí)現(xiàn)

    Vue中是怎么實(shí)現(xiàn)數(shù)據(jù)雙向綁定的?下面本篇文章就來帶大家一起探討下Vue中數(shù)據(jù)雙向綁定的原理及實(shí)現(xiàn),希望對(duì)大家有所幫助!

    深入探討Vue中數(shù)據(jù)雙向綁定的原理及實(shí)現(xiàn)

    使用vue也好有一段時(shí)間了,雖然對(duì)其雙向綁定原理也有了解個(gè)大概,但也沒好好探究下其原理實(shí)現(xiàn),所以這次特意花了幾晚時(shí)間查閱資料和閱讀相關(guān)源碼,自己也實(shí)現(xiàn)一個(gè)簡單版vue的雙向綁定版本,先上個(gè)成果圖來吸引各位:

    深入探討Vue中數(shù)據(jù)雙向綁定的原理及實(shí)現(xiàn)

    效果圖:

    深入探討Vue中數(shù)據(jù)雙向綁定的原理及實(shí)現(xiàn)

    是不是看起來跟vue的使用方式差不多?接下來就來從原理到實(shí)現(xiàn),從簡到難一步一步來實(shí)現(xiàn)這個(gè)SelfVue。由于本文只是為了學(xué)習(xí)和分享,所以只是簡單實(shí)現(xiàn)下原理,并沒有考慮太多情況和設(shè)計(jì),如果大家有什么建議,歡迎提出來。

    本文主要介紹兩大內(nèi)容:

    • 1. vue數(shù)據(jù)雙向綁定的原理。

    • 2. 實(shí)現(xiàn)簡單版vue的過程,主要實(shí)現(xiàn){{}}、v-model和事件指令的功能。(學(xué)習(xí)視頻分享:vue視頻教程)

    相關(guān)代碼地址:https://github.com/canfoo/self-vue

    vue數(shù)據(jù)雙向綁定原理


    Vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實(shí)現(xiàn)的,那么Vue是如果進(jìn)行數(shù)據(jù)劫持的,我們可以先來看一下通過控制臺(tái)輸出一個(gè)定義在Vue初始化數(shù)據(jù)上的對(duì)象是個(gè)什么東西。

    代碼:

    var vm = new Vue({     data: {         obj: {             a: 1         }     },     created: function () {         console.log(this.obj);     } });

    結(jié)果:

    深入探討Vue中數(shù)據(jù)雙向綁定的原理及實(shí)現(xiàn)

    我們可以看到屬性a有兩個(gè)相對(duì)應(yīng)的get和set方法,為什么會(huì)多出這兩個(gè)方法呢?因?yàn)関ue是通過Object.defineProperty()來實(shí)現(xiàn)數(shù)據(jù)劫持的。

    Object.defineProperty( )是用來做什么的?它可以來控制一個(gè)對(duì)象屬性的一些特有操作,比如讀寫權(quán)、是否可以枚舉,這里我們主要先來研究下它對(duì)應(yīng)的兩個(gè)描述屬性get和set,如果還不熟悉其用法,請(qǐng)點(diǎn)擊這里閱讀

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)