当问及这个问题的时候，你可能首先就会想到vue的v-model，然后官网是这么介绍的
v-model.png
那么如何自己实现一个v-model的这种双向数据绑定的机制呢
请看下面代码
v-model.png
这应该是最简单的实现v-model数据绑定的demo。只需要在一个组件里面有个props，加上一个value，然后当组件要去修改数据的时候， $emit一个input事件，并且把新的值传出去。这就实现了Vue里面的数据双向绑定。
其实，v-model指令就是在组件上加了一个props，以及增加了一个事件监听（比如本demo中的input事件），说白了，在v-model里面作者帮我们封装了这个双向绑定的逻辑，我们只管拿去用就好。
一句话总结就是：在数据渲染时使用prop渲染数据
将prop绑定到子组件自身的数据上，修改数据时更新自身数据来替代prop，
watch子组件自身数据的改变，触发事件通知父组件更改绑定到prop的数据。
面试官可能还会不厌其烦地问你，Vue数据绑定这样做的好处是什么？
敲黑板划重点：父组件数据改变时，不会修改存储prop的子组件数据，只是以子组件数据为媒介，完成对prop的双向修改。
如果还要继续深挖，就得搬个小板凳泡上一壶茶准备好瓜子花生，坐下来跟面试官好好聊一聊Vue的响应式原理了，Object.defineProperty()通过 getter 和 setter 劫持了对象赋值的过程，在这个过程中可以进行更新 dom 操作等等。
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter。这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
网友评论