Vue2 如何实现双向绑定

213 阅读1分钟

双向绑定一般都是使用v-model或者.sync来实现的,1v-modelv-bind:valuev-on:input的语法糖

v-bind:value 是实现data => UI 的单向绑定
v-on:input 是实现 UI => data 的单向绑定

前者是通过 Object.defindProper API 给data创建 getter 和setter ,用于监听 data 的改变,当data发生改变时就会安排改变 UI

后者是通过 template conpiler 给 DOM 添加事件监听 , DOM 发生改变时,就会去修改data