近幾年前端技術(shù)棧真是發(fā)展的太迅速了，從以前的針對dom操作的框架如jquery，ext.js等框架逐步過渡到當(dāng)前的mvvm模式，讓前端開發(fā)者將注意力從dom操作逐漸解脫出來，專注于邏輯的實現(xiàn)，個人認(rèn)為開發(fā)效率至少提升了1倍，mvvm模式的一個核心便是數(shù)據(jù)的雙向綁定。

什么是數(shù)據(jù)的雙向綁定？

上面說的是在vue框架中數(shù)據(jù)雙向綁定的應(yīng)用，個人認(rèn)為這個特性很贊，是大幅提升開發(fā)效率的關(guān)鍵，那如果脫離mvvm的框架，我也想實現(xiàn)這種數(shù)據(jù)的雙向綁定，可不可以實現(xiàn)了，該如何實現(xiàn)了？

用原生js模擬數(shù)據(jù)雙向綁定

實現(xiàn)步驟：

一：用js監(jiān)聽數(shù)據(jù)的變化并將變化的數(shù)據(jù)時時的同步到頁面

為了實現(xiàn)這個功能我們需要用到j(luò)s的一個方法Object.defineProperty

推薦下我的前端群：524262608，不定期會有干貨分享，初學(xué)者還有一套整理好的入門教程，歡迎初學(xué)者和進(jìn)階中的小伙伴。

1.屬性介紹

2.方法介紹

大概的介紹了defineProperty核心的兩個方法，看到這里，你就知道可以利用這兩個內(nèi)置方法搞事情了，看下面利用該方法實現(xiàn)數(shù)據(jù)雙向綁定的一個例子

效果如下，當(dāng)姓名發(fā)生變化時后面的輸入框中的值也同步發(fā)生變化：

小結(jié)：雖然對此屬性沒有太研究，但是感覺還是蠻新鮮的，之前只是用到了mvvm模式帶來的便捷卻不知道如何去實現(xiàn)，完全么有思路的說，但是小伙伴們，你們看完上述代碼，現(xiàn)在心中的疑惑應(yīng)該會少很多哈，，嘎嘎。