先说结果,Vue的双向绑定可以实现数据变化更新视图,视图变化更新数据。 我们Vue中的数据对象在初始化的过程中会通过生命周期中的state方法将data,prop,method,computed,watch中的数据进行劫持并监听所有属性,vue在这个过程中会通过observe方法和Object.defineProperty方法将相关对象转换为Observe对象,然后每一个Observer都有一个Dep实例,这个Dep实例创建出来的对象就是Observer对象和Watcher对象之间的纽带,用来存储订阅者Watcher,然后Watcher对象又是Observer和Compile之间通信的桥梁,所以会将模板和Observer对象结合在一起生成Watcher实例,当compile解析模板的时候,会通过Watcher对象,Dep对象与观察者模式将模板中的指令与对象建立依赖关系(此时可以使用全局对象Dep.target实现依赖收集),将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,当数据变化时,setter会被调用,触发Object.defineProperty方法中的dep.notify方法,遍历该数据依赖列表,执行器中的update方法通知Watcher进行视图更新。