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>