vue技术栈（2）

软件架构模式

MVC 

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

1.视图（VIew）：用户界面。

2.控制器（Controller）：业务逻辑。

3.模型（Model）：数据保存（数据库访问）。

 MVVM

        概述:在MWVM模式中,View(视图)和Model(数据)是不可以直接通讯的,在它们之间存在着ViewModel这个中间介充当着观察者的角色。当用户操作View(视图), ViewModel感知到变化，然后通知Model发生相应改变;反之当Model(数据)发生改变，ViewModel也能感知到变化，使View 作出相应更新。这个一来一回的过程就是我们所熟知的双向绑定。

         Model模型层，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开(ajax数据)

         view视图层:负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面

         ViewMode视图模型层:用来连接Model和View，是Model和vView之间的通信桥梁(vue的核心)

MVVM的主要核心就是双向绑定 

 数据绑定

         数据绑定(英语:Data binding)是将"提供器”的数据源与“消费者"绑定并使其同步的一种通用技术。这通常用两种不同语言的数据/信息源完成，如XML数据绑定。在UI数据绑定中，相同语言但不同逻辑功能的数据与信息对象被绑定在一起（(例如Java UI元素到ava对象)。

vue如何实现双向绑定 

         注意这里的双向绑定功能指的是 ViewModal<===>View，因为Modal层不是vue来实现，我们可以不管（但要注意MVM模式双向绑定还有这种情况modal<===>ViewModal)

         Vue是数据劫持和观察者模式结合的一种数据绑定方式

         数据劫持+事件实现数据双向绑定

         v-model只是一个语法糖,并不是等同于双向数

 

 变化侦测

 对象的侦测

         基于Object.defineProperty方法，递归调用这个方法去初始化data的属性

 数组的侦测

         使用了函数劫持的方式，重写了数组的方法,Vue将data中的数组进行了原型链重写,指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化

         索引不会去侦测，所以官方采用vue.$set去修改数组元素才会触发更新

Vue响应式原理 

 什么是响应式：        数据改变，视图自动更新

实现原理： 

        主要通过Object.defineProperty + 观察者模式实现的

        Object.defineProperty里面的get，用于依赖收集

        Object.defineProperty里面的set，用于派发更新

        每个data声明的属性，都拥有一个专属依赖收集器dep，我们理解为观察目标

        收集依赖也就是手机watcher，通过watcher来通知依赖进行更新，这里的watcher就是观察者