MVVM 架构模式详解

MVVM 是什么?

        MVVM 它是前端的一个架构模式,VUE.JS就是基于这个模式实现出来的一套框架

         (基于MVVM架构的还有:微信小程序,AngularJS,ReactJs)

MVVM 由什么组成?

        MVVM 由三部分组成,分别是 Model,View,ViewModel

        Model:简单说就是 JS里的变量数据

        View:简单说就是 页面上HTML元素

        ViewModel:是Vue.js的核心,它是一个Vue实例,它有两个工具,作用简单来说就是 让然 Model 与 View 产生联系,并让DOM和数据保持同步 分别是:

                DOM Listeners:监听页面上的数据被改动后,将同步更新到 Model 内

                Data Bindings:当 Model 内数据发生改变时,页面上对应的 DOM 会重新渲染

MVVM 的作用总结?

        MVVM 的架构模式,使框架具有数据驱动的特点。

MVVM 架构模式详解_第1张图片

MVVM 原理?

采用 数据劫持结合发布者-订阅者模式

在 Vue实例化的过程中

一方面: 通过 SE5 提供的 Object.defineProperty() 方法,将对象内所有数据转换成对应的setter,getter方法。

一方面: 初始化视图,并订阅 Watcher 来更新视图, 此时 Wather 会将自己添加到消息订阅器中 (Dep) ,初始化完毕。

当数据改变,做了什么处理?

当数据发生变化时 (触发 setter),Observer 中的 setter 方法被触发,setter 会立即调用Dep.notify(),Dep 开始遍历所有的订阅者,并调用订阅者的 update 方法,订阅者收到通知后对视图进行相应的更新。

MVVM 的思想?

DOM 的状态更新 让MVVM架构模式去自动完成,以减少开发人员对 DOM 的操作。

Observer :数据监听器,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者,内部采用 SE5的 Object.defineProperty 的 getter 和 setter 来实现

Compile  :指令解析器(v-for,v-if...),它的作用对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数

Watcher  :订阅者,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数

Dep :消息订阅器,内部维护了一个数组,用来收集订阅者(Watcher),数据变动触发 notify 函数,再调用订阅者的 update 方法

MVVM 架构模式详解_第2张图片

你可能感兴趣的:(vue.js,javascript,前端)