假设现在页面(View层)上有一个input 标签,如果我们要获取到input中的value,那么必须使用JS(Model层)为input绑定事件来监听它,从而获取input中输入的数据;当要设置input的值时,也是通过JS来设置,这就是单向绑定
双向绑定
双向绑定就是我不需要为input绑定事件,对它进行监听,input的变化会实时反应到我这儿;
用Vue.js中的v-model来添加双向绑定:
<input v-model="xxx">
其实上面的代码等价于下面的:
<input :value="xxx" @input="xxx = $event.target.value">
也就是说:
双向绑定 = 单向绑定 + UI事件监听
双向绑定与单向绑定有优缺点
单向绑定:使得数据流也是单向的,对于复杂应用来说这是实施统一的状态管理(如redux)的前提。
双向绑定:在一些需要实时反应用户输入的场合会非常方便(比如多级联动菜单)。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势。因为我们不知道状态什么时候发生改变,是谁造成的改变,数据变更也不会通知我们
注意,Vue 虽然通过 v-model 支持双向绑定,但是如果引入了类似redux的vuex,就无法同时使用 v-model