什么是双向绑定

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子：

data () {
    return {
        form:{
            name: '',
            email: ''
        }
    }
}

<input type='text' name="name"/>
<input type='text' name="email"/>

可以理解为填写表单时页面上的输入框和data里的的数据关联，用js操作data时也会改变页面输入框的值

双向绑定的原理

我们知道vue是一个mvvm框架，mvvm由三部分组成

• 数据层（Model）：应用的数据及业务逻辑
• 视图层（View）：应用的展示效果，各类UI组件
• 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来 那这又是如何实现的呢，接着往下看。

1. 初始化vue实例，劫持data,实现响应式

通过object.defineProperty劫持data，绑定getter和setter方法，在get时添加到watcher，同时把watcher自身缓存到Dep的target。当响应式数据发生变化时触发setter，调用订阅器notify()方法通知订阅器发生变化

2. 订阅器触发notify()方法后通知观察者watcher发生改变，触发update()方法

3. 订阅数据更新，触发相应的更新函数，更新视图。complie解析指令，替换模板数据

结语

写的不好，各位大佬多多指教，感恩家人🙏