Vue數(shù)據(jù)雙向綁定（Object.defineProperty()）

hello 大家好，我是一只前端小白，大佬請留言指導。

今天，本小白就用剛學來的知識來裝裝逼，一方面加深一下對知識的理解，另一方面為同為小白的各位小伙伴做個小白視角的講解。
對于vue或者angular，我印象最深刻的一個裝逼利器就是我在input框中輸入內(nèi)容，下方會同步跟著我輸出相同的內(nèi)容，雖然暫時不清楚這在深一層會有什么大用途，但是我就是很喜歡這樣裝逼的東西。

效果展示

就是這種裝逼的神器，其實上述功能并不是用vue實現(xiàn)的，而是我自己實現(xiàn)的，接下來，我們用兩種方法來分析這種功能的實現(xiàn)。

1 分析需求, 用最簡單的方式實現(xiàn)

如果認真想一下，其實這個功能也沒有什么很高的技術含量，不就是1. 在輸入框中輸入內(nèi)容，2. 獲取到輸入的內(nèi)容并展示在下方的p(或者其他)標簽中嘛。
根據(jù)分析，我們用代碼實現(xiàn)一下

<!--html文件-->
<input type="text" id="ipt">
<p id="showText"></p>

// 獲取兩個標簽
var itp = document.getElementById("ipt");
var showText = document.getElementById("showText");

// 給ipt輸入框添加keyup事件
ipt.addEventListener('keyup',function(event){
//艾瑪，其實我覺得用事件監(jiān)聽器綁定事件真是一種好用又裝逼的方法（可以看出本小白是多么純的小白），好處多多

//不知道event是什么？打印一下就知道了，里面去找target看看它是個什么東西

//將ipt的value賦值給showText的innerText
    showText.innerText = event.target.value;
})

沒啥了，接下來去輸入框?qū)憙?nèi)容吧，已經(jīng)達到效果了。艾瑪，用經(jīng)典方法實現(xiàn)了這個功能，心理有點小激動啊，更想往下看看還有什么更牛的裝逼技術了。

2 通過Object.defineProperty()方法來實現(xiàn)(好像是vue的原理哦，仔細看喲)

先簡單介紹一下Object.defineProperty();說實話吧，我知道的東西就剛夠?qū)崿F(xiàn)上面的功能，所以就不拓展了，有大神也講過這個方法，說的比較全面，可惜當時一看就感覺懵，就放棄看了，一會再去鞏固一下。
這個方法有三個參數(shù)Object.defineProperty(yourObjName,property,{get,set...}),那個點點點代表其他，我只略懂get，set。第一個參數(shù)就是我們定義的對象的名稱了，第二個就是對象的屬性，隨便寫吧，第三個參數(shù)是一個對象，里面的get和set方法接下來會仔細說明。

// 我們首先驗證一下set和get有什么作用吧

// 首先隨便定義一個對象
var obj = [];

// 使用Object.defineProperty()方法,屬性名我就寫個something，注意啦，set和get屬性對應的都是匿名函數(shù)，并且set有個參數(shù)
Object.defineProperty(obj,'something',{
    get: function(){
        console.log('hello I am get');
    },
    set: function(val){
        console.log('hello 我是參數(shù)',val);
        console.log('hello I am set');
    }
})
// 代碼寫完了，接下來我們?nèi)g覽器窗口看看會發(fā)生什么吧

我只輸入了第一行內(nèi)容哦，快看發(fā)生什么事情啦，自動觸發(fā)了set對應的函數(shù)（為什么會觸發(fā)set呢，因為我們在set值啊

傻逼臉

）

再看看啦，我使用了一次obj的something屬性，結果它自定觸發(fā)了一個get屬性對應的函數(shù)（艾瑪，多么神奇?。?/p>

是不是現(xiàn)在有些小伙伴就有想法了，既然觸發(fā)了函數(shù)，我們可以在函數(shù)中做一些我們想做的事情啊，不光是實現(xiàn)上面的功能，我們還可以實現(xiàn)更多不可告人的功能

開心

但是，我們不要跑題啊，我們還是要實現(xiàn)上面的功能的

// come on baby,先把上面已知的東西拿過來
var itp = document.getElementById("ipt");
var showText = document.getElementById("showText");
var obj = [];
// 開始我們的表演

Object.defineProperty(obj,'something',{
    get: function(){
        console.log('hello I am get');
    },
    set: function(val){
        //將showText的內(nèi)天替換為obj的something屬性的值，只要something有改變就會執(zhí)行
        showText.innerText = val;
        //同時將ipt的值也替換為val，有人肯定有疑惑，這里替換有什么必要嗎，難道僅僅為了裝逼，稍后就知道了
        ipt.value = val;
    }
})

// 按下鍵盤，將ipt的value值賦值給obj的something屬性
ipt.addEventListener('keyup',function(event){
    obj.something = event.target.value;
})

實現(xiàn)了

成功完成裝逼任務，接下來解決那個疑惑