Vue 模拟源码实现响应式原理——实现双向绑定（最终部分）

前言

如果你已经了解了Vue的响应式原理，那么双向绑定的实现对你来说已经比较简单了。
因为表单的双向绑定的实现也就是基于响应式原理，它的实现并不复杂。

视图变化更新数据

只需要给node节点添加一个监听事件，也就是input事件，当视图数据发生变化时，将节点的值赋给Vue实例中对应的属性。
当Vue实例中属性值发生变化时，又会触发响应式机制，响应式机制会在数据发生变化时重新更新视图。
概括的说：文本框数据发生变化 → 触发响应式机制 → 重新更新视图

代码实现

• 在 compiler.js 中modelUpdater方法中 给node节点添加监听事件，触发响应式机制

// v-model 指令的更新方法
    modelUpdater(node, value, key) {
        node.value = value
        // 创建watcher对象，当数据改变更新视图
        new Watcher(this.vm, key, (newValue) => {
            node.value = newValue
        })
        // 双向绑定——监听视图的变化
        node.addEventListener('input', () => {
            this.vm[key] = node.value
        })
    }

相关链接

Vue 响应式原理——vue.js
Vue 响应式原理——observer.js
Vue 响应式原理——compiler.js
Vue 响应式原理——dep.js
Vue 响应式原理——watcher.js