vue数据双向绑定

vue 2.0版本中采用数据劫持的方式让数据变成响应式数据
实现一个简单的双向绑定：

// html结构
<input id="input" type="text">
<div class="show-panel"></div>

// 双向绑定特点：在页面中操作，会改变数据；改变数据，变化会体现在页面中
let inputEle = document.querySelector('#input')
let showEle = document.querySelector('.show-panel')
inputEle.addEventListener('input', (e) => {// 在页面中操作，会改变数据obj.value = e.target.value
})
let obj = {}
Object.defineProperty(obj, 'value', {configurable: true,enumerable: true,get: () => {return val},set: (newVal) => {val = newVal// 改变数据，变化会体现在页面中showEle.innerHTML = valinputEle.value = val}
})
obj.value = '哈哈哈'

js的数据双向绑定是使用了object的defineProperty方法，在对象的属性改变的时候触发defineProperty的set方法，set方法接收一个参数，是对象属性改变之后的新赋值的属性值，我们可以设置dom的innerHTML等于这个值。