詳解 vue 雙向數(shù)據(jù)綁定的原理，并實(shí)現(xiàn)一組雙向數(shù)據(jù)綁定

Stardustsky 發(fā)布于2019-08-23 11:40 / 925人閱讀

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

Object.defineProperty是ES5新增的一個(gè)API，其作用是給對(duì)象的屬性增加更多的控制
Object.defineProperty(obj, prop, descriptor)
參數(shù) obj: 需要定義屬性的對(duì)象（目標(biāo)對(duì)象）
prop: 需被定義或修改的屬性名（對(duì)象上的屬性或者方法）
對(duì)于setter和getter，我的理解是它們是一對(duì)勾子（hook）函數(shù)，當(dāng)你對(duì)一個(gè)對(duì)象的某個(gè)屬性賦值時(shí)，則會(huì)自動(dòng)調(diào)用相應(yīng)的setert函數(shù)；而當(dāng)獲取屬性時(shí)，則調(diào)用getter函數(shù)。這也是實(shí)現(xiàn)雙向數(shù)據(jù)綁定的關(guān)鍵。

2：自己實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定：


    
    




    var obj = {}
    Object.defineProperty(obj, "txt", {
        get: function () {
            return obj
        },

        set: function (newValue) {
            document.getElementById("txt").value = newValue
            document.getElementById("show-txt").innerHTML = newValue
        }
    })

    document.addEventListener("keyup", function (e) {
        obj.txt = e.target.value
    })

GPU云服務(wù)器云服務(wù)器雙向數(shù)據(jù)綁定 js雙向數(shù)據(jù)綁定 js雙向綁定數(shù)據(jù) asp雙向數(shù)據(jù)綁定

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/97301.html

相關(guān)文章

Vue簡(jiǎn)單實(shí)現(xiàn)原理

摘要：需要指令解析器，對(duì)每個(gè)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)。然后將模版中的變量替換成數(shù)據(jù)，渲染，將每個(gè)指令對(duì)應(yīng)的節(jié)點(diǎn)綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)發(fā)生變動(dòng)，收到通知，更新視圖。用了Vue也有兩年時(shí)間了，一直以來都是只知其然，不知其所以然，為了能更好的使用Vue不被Vue所奴役，學(xué)習(xí)一下Vue底層的基本原理。 Vue官網(wǎng)有一段這樣的介...

luqiuwen 2019-08-23 16:16 評(píng)論0 收藏0
Vue雙向綁定原理，教你一步一步實(shí)現(xiàn)雙向綁定

摘要：儲(chǔ)存訂閱器因?yàn)閷傩员槐O(jiān)聽，這一步會(huì)執(zhí)行監(jiān)聽器里的方法這一步我們把也給弄了出來，到這一步我們已經(jīng)實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的雙向綁定了，我們可以嘗試把兩者結(jié)合起來看下效果。總結(jié)本文主要是對(duì)雙向綁定原理的學(xué)習(xí)與實(shí)現(xiàn)。當(dāng)今前端天下以 Angular、React、vue 三足鼎立的局面，你不選擇一個(gè)陣營(yíng)基本上無法立足于前端，甚至是兩個(gè)或者三個(gè)陣營(yíng)都要選擇，大勢(shì)所趨。所以我們要時(shí)刻保持好奇心，擁抱變化，...

Labradors 2019-08-23 12:31 評(píng)論0 收藏0
Vue 雙向數(shù)據(jù)綁定原理分析

摘要：關(guān)于雙向數(shù)據(jù)綁定當(dāng)我們?cè)谇岸碎_發(fā)中采用的模式時(shí)，，指的是模型，也就是數(shù)據(jù)，，指的是視圖，也就是頁面展現(xiàn)的部分。參考沉思錄一數(shù)據(jù)綁定雙向數(shù)據(jù)綁定實(shí)現(xiàn)數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫處理過程中，也就是定義的數(shù)據(jù)函數(shù)中。關(guān)于雙向數(shù)據(jù)綁定當(dāng)我們?cè)谇岸碎_發(fā)中采用MV*的模式時(shí)，M - model，指的是模型，也就是數(shù)據(jù)，V - view，指的是視圖，也就是頁面展現(xiàn)的部分。通常，...

nanfeiyan 2019-08-22 10:47 評(píng)論0 收藏0
Vue面試題精選：Vue原理以及雙向數(shù)據(jù)綁定的實(shí)戰(zhàn)過程

摘要：雙向數(shù)據(jù)綁定指的是，將對(duì)象屬性變化與視圖的變化相互綁定。數(shù)據(jù)雙向綁定已經(jīng)了解到是通過數(shù)據(jù)劫持的方式來做數(shù)據(jù)綁定的，其中最核心的方法便是通過來實(shí)現(xiàn)對(duì)屬性的劫持，達(dá)到監(jiān)聽數(shù)據(jù)變動(dòng)的目的。和允許觀察數(shù)據(jù)的更改并觸發(fā)更新。 1 MVVM 雙向數(shù)據(jù)綁定指的是，將對(duì)象屬性變化與視圖的變化相互綁定。換句話說，如果有一個(gè)擁有name屬性的user對(duì)象，與元素的內(nèi)容綁定，當(dāng)給user.name賦予一個(gè)新...

malakashi 2019-08-02 16:10 評(píng)論0 收藏0