一.首先说明一下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实现双向绑定
<div class="one">
<input type="text" id="first">
</div>
<div class="two">
<p id="second"></p>
</div>
<script>
var obj = {}
Object.defineProperty(obj,'change',{
get(){
return obj
},//这里要加逗号，不然会报错
set(newvalue){
if(!newvalue){//这里的作用是判断是否有新值传过来，如果没有就返回！不做判断的话，文本框内就会出现undefined
return
}
document.querySelector('#first').value = newvalue
document.querySelector("#second").innerHTML = newvalue
}
})
document.addEventListener('keyup',(e)=>{//触发相对应的监听回调
obj.change = e.target.value
})
</script>
最后的效果实现：
