最近總是有兄弟問我，Vue雙向綁定的原理，以及簡單的原生js寫出來實現，我就來一個最簡單的雙向綁定，原生十行代碼讓你看懂原理

時間 2019-11-05

標籤最近總是兄弟問我 vue 雙向綁定原理以及簡單原生寫出實現一個最簡單代碼讓你看懂欄目 JavaScript 简体版

原文原文鏈接

廢話很少說直接看效果圖

代碼很好理解，可是在看代碼以前須要知道Vue雙向綁定的原理其實就是基於
Object.defineProperty 實現的雙向綁定官方傳送門

這裏咱們用官方的話來講
Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性，並返回這個對象。
語法：
Object.defineProperty(obj, prop, descriptor)
參數
obj：
要在其上定義屬性的對象。
prop：
要定義或修改的屬性的名稱。
descriptor：
將被定義或修改的屬性描述符。

這裏面要說的真的就太多了，咱們就調雙向綁定須要用到的說一下就能夠了，須要瞭解更多的朋友能夠進官網官網看更加詳細的javascript

這裏咱們就只是說一下 Object.defineProperty裏面的核心的 get 和 set

get

let data ={} ;
let index = 1;
Object.defineProperty(data,"age",{ //不明白參數什麼含義的請往上看咯
    get:function(){
        return index;//獲取到了定義的index變量
    }
})
console.log(data); // {age:1}

怎麼樣，是否是很是簡單，那麼咱們趁熱趕忙看一下set吧

set

var data ={} ;
var index= 1;
Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi;
    }
})
console.log(data);// {age:1}
哈哈 是否是感受和上面的get是同樣的呢？用法都是同樣的 那麼樓主能來點不同的嘛？
回答：能夠


----------


Object.defineProperty(data,"age",{
    get:function(){
        return index;
    },
    set:function(newZhi){
        index=newZhi+10;
    }
})
console.log(data); // {age:11}

既然Object.defineProperty裏面的set和get看懂了就能夠直接上手簡單的雙向綁定啦，這時候有的小夥伴可能就問了：什麼？這麼快？回答：就是這麼快
直接貼代碼每一行都是有註釋的趕忙看看吧java

<body>
        <input type="text" id="inp"/>
        <div id="text">我是測試數據的</div>
</body>
<script type="text/javascript">
        const inp = document.getElementById("inp"),tex=document.getElementById("text"), data = {};//獲取兩個元素
        Object.defineProperty(data,"name",{
            get:function(){
                return inp.value;//獲取到文本框value輸入的值
            },
            set:function(newdata){//接收到文本框value的值
                tex.innerHTML = newdata;//div的值等於文本框的值
            }
        })
        inp.addEventListener("keyup",function(e){//鍵盤按下的時候來實時同步
            data.name = this.value;
        })
</script>

怎麼樣？是否是很簡單呢十行代碼就完事了(固然只是簡單的雙向綁定，拓展性很強）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。