Vue的雙向數據綁定原理

一、屬性類型

Object屬性分爲兩個類型：數據屬性、訪問器屬性，每類屬性又有其不一樣的特顯，雙向綁定的原理是根據其訪問器屬性的特性來實現的。

1.1數據屬性的特性

數據屬性有四個描述其行爲的特性
一、Configurable:是否能夠經過delete刪除,可否修改他的屬性特性，可否修改成訪問器屬性。默認值true
二、Enumerable:是否能夠經過for in循環返回改屬性
三、Writable:是否能修改屬性值
四、Value:屬性值

要就修改數據屬性的默認特性，須要用Object.defineProperty()方法

var person = {}
Object.defineProperty(person,"name",{
    writable:false;
    value:'Nicholas';
})

1.2訪問器屬性特性

一、Configurable:是否能夠刪除
二、Enumerable:是否可以循環返回屬性
三、Get:在讀取屬性的時候調用的函數。默認值是undefind
四、Set:在寫入屬性時調用的函數。
訪問器屬性不能直接定義，必須使用Object.defineProperty()來定義。

var book = {
  _year:2014,
  edition:1
};

Object.defineProperty(book,"year",{
  get:function(){
   return this._year
  },
  set:function(newValue){
   if(newValue>2004){
     this._year = newValue;
     this.editon +=newValue -2004;
   }
  }
});

book.year = 2005;
alert(book.edition);  //2

二、定義多個屬性

var book = {};
Object.defineProperties(book,{
    //數據屬性
    _year:{
        writable:true,
        value:2004
    },
    edition:{
        writable:true,
        value:1
    },
    //訪問器屬性
    year:{
        get:()=>{
            return this._year;
        },
        set:(newValue)=>{
            if(newValue>2004){
                this._year = newValue;
                this.edition += newValue -2004;
            }
        }
    }
})

三、讀取屬性特性

var descriptor = Object.getOwnPropertyDescriptor(book,"year");
alert(descriptor.value);  //undefind  訪問屬性沒有value值
alert(descriptot.get);  //funtion

四、模擬雙向綁定

<div id="app">
    <input type="text" id="txt">
    <p id="show-txt"></p>
</div>
<script>
    var obj = {}
    Object.defineProperties(obj,{
        _txt:{
            writable:true,
            value:'測試'
        },
        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
    });
    console.log(bj.txt)  //或者txt值
</script>