手写一个Vue的简单双向绑定实例！

一.首先说明一下Vue的双向绑定原理是什么！

    Vue.js采用的是数据劫持结合发布和订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter值，在数据变动时，发布消息给订阅者，出发相对应的监听回调

    （当然这是在Vue3.0之前了，好像Vue3.0发布之后的版本里，采用的是Proxy来进行双向绑定，这样性能可以更加得到优化，在这里我们还是以Object.defineProperty来讲解双向绑定）

二.Object.defineProperty(obj,prop,descriptor)

1. obj是定义你要操作的对象元素，简单来说就是你要操作的对象

2. prop是定义对象上的属性，简单来说就是你要操作的对象下的属性

3. descriptor 将定义或修改的属性描述，它有以下几个属性{

    value:属性对应的值，可以使用任意类型的值，默认为undefined

    writable:属性的值是否可以被改写，设置为true则可以改写，设置为false则不能改写，这里默认是false

    enumerable:这个属性是否可以被枚举（for ... in ）设置为true则可以被枚举，反之不行，在这里默认为false

    configurable：是否可以删除目标属性或是否可以再次修改属性的特性（writeable,enumerable）设置为true则可以删除或者可以重新设置特性，设置为false，则不可以被删除和修改特性，同样，这里默认为false

    简单来说这个属性起到两个作用：@目标属性是否可以被delete删除        @目标属性是否可以再次设置特性

}

三：原生js实现双向绑定

        

        

最后的效果实现：