VUE-双向绑定

参考:https://www.jianshu.com/p/5fe2664ff5f7

1,MVVM模式

MVVM模式是通过以下三个核心组件组成，每个都有它自己独特的角色：

        Model - 包含了业务和验证逻辑的数据模型

        View - 定义屏幕中View的结构，布局和外观

        ViewModel - 扮演“View”和“Model”之间的使者，帮忙处理 View 的全部业务逻辑

2,双向绑定

首先双向绑定指的是view的改变会触发model数据的改变,model数据的改变会触发view的改变.

(1)view的改变触发数据的改变:这个实现比件容易,可以通过事件监听实现

(2)数据的改变触发view的改变:这个是通过Object.defineProperty()这个方法实现数据劫持,以及发布者订阅模式实现的.

数据劫持:vue实例化的时候会去遍历model对象的所有属性,给这些属性加上get,set方法进行劫持

发布订阅者模式:需要订阅一个监听器监听数据的改变,然后通知订阅者,再由订阅者去更新view

3,总结一下数据改变触发view改变的过程

(1)vue初始化实例的时候,通过Object.defineProperty()这个方法实现数据劫持

(2)定义监听器监听实例属性的变化

(3)监听器监听到属性变化后通知对应的订阅者

(4)订阅者执行对应的方法重新视图

(5)编译器扫描解析节点的相关指令,初始化模板数据以及初始化响应的订阅器