模拟实现Vue的数据双向绑定
在使用vue开发时,对于<input>
元素,通过指令v-model
就可以达到一个数据双向绑定的效果,在这儿,我们不讨论v-model
的实现原理,就只简单讨论并模拟实现一个数据双向绑定。
数据双向绑定的特点是双向:当我们在页面中的操作影响数据时,会直接改变数据(页面——>数据);当我们在代码中改变数据时,对应的变化会体现在页面的展示中(数据——>页面)。
vue 2.0版本中采用数据劫持的方式让数据变成响应式数据,3.0版本采用代理proxy
方式让数据变成响应式数据,响应式数据可以实现数据到页面单向流,改变数据时会立刻将变化体现在页面中,在此基础上,我们继续添加页面到数据的单向流,进而实现双向绑定。详细如下:
实现一个简单的双向绑定:
// html结构
<input id="input" type="text">
<div class="show-panel"></div>