模拟实现Vue的数据双向绑定

模拟实现Vue的数据双向绑定

在使用vue开发时，对于<input>元素，通过指令v-model就可以达到一个数据双向绑定的效果，在这儿，我们不讨论v-model的实现原理，就只简单讨论并模拟实现一个数据双向绑定。

数据双向绑定的特点是双向：当我们在页面中的操作影响数据时，会直接改变数据（页面——>数据）；当我们在代码中改变数据时，对应的变化会体现在页面的展示中（数据——>页面）。

vue 2.0版本中采用数据劫持的方式让数据变成响应式数据，3.0版本采用代理proxy方式让数据变成响应式数据，响应式数据可以实现数据到页面单向流，改变数据时会立刻将变化体现在页面中，在此基础上，我们继续添加页面到数据的单向流，进而实现双向绑定。详细如下：

实现一个简单的双向绑定：

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

数据劫