面试题：双向数据绑定、组件通信（全）、监听input输入内容的变化

1.双向数据绑定？

    model => view 以及 view => model 的双向绑定
    把Model绑定到View，JS代码更新Model时，View就会自动更新;
    用户更新了View，Model的数据也自动被更新了

    1.双向绑定由三个重要部分构成:MVVM
        1）数据层（Model）
        2）视图层（View）
        3）业务逻辑层（ViewModel）：将数据与视图关联起来

    2.ViewModel的功能：1）数据变化后更新视图
                      2）视图变化后更新数据

    3.ViewModel的两个主要部分：1）监听器（Observer）：对所有数据的属性进行监听
                             2）解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

    4.流程：1）new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中
            2）同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中
            3）同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数
            4）由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher
            5）将来data中数据⼀旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

2.组件通信  

 1）父子组件之间的通信
        1.props / $emit
            1）父组件通过props向子组件传递数据：子组件的数据会随着父组件不断更新。
            2）子组件通过$emit和父组件通信：$emit绑定一个自定义事件，当这个事件被执行时就会将参数传递给父组件，而父组件通过v-on监听并接收参数。
        2.ref / $refs
            1）在子组件上，ref的引用指向了子组件的实例。可以通过实例来访问组件的数据和方法。
            2）父组件中通过this.$refs来访问
    2）兄弟组件之间的通信
        1.EventBus
            使用场景：兄弟组件传值
                创建一个中央事件总线EventBus
                兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
                另一个兄弟组件通过$on监听自定义事件
        2.$parent 或$ root
            通过共同祖辈$parent或者$root搭建通信桥连
            兄弟组件：this.$parent.on('add',this.add)
            另一个兄弟组件：this.$parent.emit('add')
    3）祖孙与后代组件之间的通信
        1.$attrs 与$ listeners
            使用场景：祖先传递数据给子孙
                设置批量向下传属性$attrs和 $listeners
                包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
                可以通过 v-bind="$attrs" 传⼊内部组件
        2.provide 与 inject
            祖先组件通过provide发送传递的值
            后代组件通过inject接收值
    4）复杂关系的组件间通信
        Vuex作用相当于一个用来存储共享变量的容器    

3.input输入框的内容发生改变后台怎么知道？

        监听