MVVM 模式、Vue 双向绑定原理

MVVM模式是什么 

传统的 MVC 指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理，控制器会获取数据。将结果返回给前端,页面重新渲染

MVVM（Model-View-ViewModel）是一种软件架构模式，用于实现界面（UI）和业务逻辑的分离。他的设计目标是将界面的开发与后端的业务逻辑分离，使得代码易于理解、维护和测试。

        MVVM各个组成部分的职责如下：

• Model（模型）：表示应用程序的数据业务逻辑，它负责数据的存储、检索和更新，并封装了相关的数据操作和规则。
• View（视图）：展示用户的界面，通常是由UI元素组成的。他是负责与用户进行交互的界面，负责将数据呈现给用户,并接收用户的输入
• ViewModel（视图模型）：连接视图和模型，负责处理业务逻辑和数据交互。它从model中获取数据，并将数据转换为为View中可以理解和展示的数据。ViewModel还负责监听View的变化，并根据用户的输入更新Model的数据。

MVVM的核心思想是数据绑定

Vue双向数据绑定原理

        MVVM的核心思想是数据绑定，通过双向绑定View和ViewModel中的数据保持同步。当ViewModel中的数据发生变化的时候，View中的数据会同步更新，反之亦然。这种双向绑定的方式使得开发者只需要关注逻辑的开发，不需要手动去操作DOM来更新界面。 

Vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter,getter。在数据变动时候发布消息给订阅者，出发相应的监听回调，主要分为一下几个步骤：

1. 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这对象的某个属性值，就会出发setter，那么久能监听到数据的变化
2. compile解析模板命令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
3. watcher订阅者是Observe和Compile之间通信的桥梁，主要做的事情是：1在自身实例化时往属性订阅器(dep)里面添加自己 自身必须有一个update0方法 图待属性变动dep.notice0通知时，能调用自身的update0万法，并触发Compile中绑定的回调，则功成身退。
4. MVVM作为数据绑定的入口，整合Observer、 Compile和Watcher二者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 ->视图更新，视图交互变化(input) ->数据model变更的双向绑定效果

参考：

前端进阶之旅