vue实现双向绑定原理以及mvvm模型与mvc比较

 

目录

1.什么是mvvm?

2.mvvm和mvc区别

3.vue双向绑定原理

4.vue 从初始化页面--修改数据--刷新页面 UI 的过程 

5.如何理解 Vue 的响应式系统 

---

1.什么是mvvm?

MVVM是 Model-View-ViewModel 的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来， ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状 态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

2.mvvm和mvc区别

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的 viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷。

3.vue双向绑定原理

mvvm 双向绑定，采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来 劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

几个要点：

1）实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。

2）实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据， 以及绑定相应的更新函数。

3）实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通 知，执行指令绑定的相应回调函数，从而更新视图。

4）mvvm 入口函数，整合以上三者。

具体步骤：

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

4.vue 从初始化页面--修改数据--刷新页面 UI 的过程 

当 Vue 进入初始化阶段时：

一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化 成 getter/setter 的形式，实现数据劫持(暂不谈 Vue3.0 的 Proxy)；另一方面，Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新试图，此时 Watcher 会将自己添加到消息订阅器 Dep 中，此时初始化完毕。

当数据发生变化时：

触发 Observer 中 setter 方法，立即调用 Dep.notify(),Dep 这个数组开始遍历所有 的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。

5.如何理解 Vue 的响应式系统 

响应式系统简述： 

• 任何一个 Vue Component 都有一个与之对应的 Watcher 实例
• Vue 的 data 上的属性会被添加 getter 和 setter 属性
• 当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被 调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
• data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新