Vue双向数据绑定的原理+mvc mvp mvvm设计模式图解

vue特点

易用（使用成本低），灵活（生态系统完善，适用于任何规模的项目），高效（体积小，优化好，性能好）

Vue是一个MVVM的js框架，但是，Vue 的核心库只关注视图层，开发者关注的只是m-v的映射关系

MV*模式（MVC/MVP/MVVM）

mv*模式

MVC

Model View Controller

​ 用户对View操作以后，View捕获到这个操作，会把处理的权利交移给 Controller；Controller会对来自View数据进行预处理、决定调用哪个Model的接口；然后由Model执行相关的业务逻辑（数据请求）； 当Model变更了以后， View通过观察者模式收到Model变更的消息以后，然后重新更新界面。

问题：model发生变化，view通过观察者模式监控model改变，从而渲染最新视图。这就导致View强依赖特定的 Model层

MVP

Model View Presenter

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

​ 和MVC模式一样，用户对View的操作都会从View交移给Presenter。 Presenter会执行相应的应用程序逻辑，并且对Model进行相应的操作；而这时候Model执行完业务逻辑以后，也是通过观察者模式把自己变更的消息传递出去，但是是传给Presenter而不是View。Presenter获取到Model变更的消息以后，通过View提供的接口更新界面。

各部分之间的通信，都是双向的

View与Model不发生联系，都是通过Presenter进行传递

View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性。而 Presenter非常厚，所有逻辑都部署在那里。

Model->View的手动同步逻辑麻烦，维护困难

MVVM

Model View ViewModel

MVVM的调用关系和MVP一样。但是，在ViewModel当中会有一个叫 Binder。你只需要在View的模版语法中，指令式地声明View上的显示的内容是和Model的哪一块数据进行绑定即可。 当ViewModel对Model进行更新的时候，Binder会自动把数据更新到View上去；当用户对View进行操作（例如表单输入），Binder也会自动的把数据更新到Model上去。这种方式称为：双向数据绑定。

它采用双向绑定：View的变动，自动反映在 ViewModel，反之亦然

Vue的使用

Vue不支持IE8，因为使用了ES5的很多特性
Object.defineProperty(_data,“msg”,{get(),set()})

• 可以直接通过script标签来引入vue.js，有开发版本和生产版本，开发版本一般我们在开发项目的时候引入，当最后开发完成上线的时候引入生产版本，开发版本没有压缩的，并且有很多提示，而生产版本全部删掉了

直接下载并用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 在Vue中提供了一个脚手架（命令行工具）可以帮我们快速的搭建基于webpack的开发环境…

npm install ‐g @vue/cli

Vue的实例

每一个应用都有一个根实例，在根实例里我们通过组件嵌套来实现大型的应用

也就是说组件不一定是必须的，但是实例是必须要有的

在实例化实例的时候我们可以传入一个；配置项，在配置项中设置很多属性方法可以实现复杂的功能

在配置中可以设置el的属性，el属性代表的是此实例的作用范围

在配置中同过设置data属性来为实例绑定数据

	<div id="app">
        {{msg}}
    </div>
    <!--引入开发版本  开发版本给一些警告信息-->
    <script src="./base/vue.js"></script>
    <script>

        //创建一个vue的实例
        //声明一条数据，然后用特殊的模板与法将其渲染到界面中进行显示  ====> 声明式渲染
        new Vue({       //vue的配置项
            el:"#app",  //el指代挂载点
            data:{      //vue管理的数据
                msg:"hello-world"  //msg数据一旦被vue进行管理了，msg上面就会有getter与setter
            }
        })
    </script>

vue的双向数据绑定原理原理

​ 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转 为 getter/setter。Object.defineProperty 是 ES5 中一个无法模拟的特性， 这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。

当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

vue内部通过数据劫持&发布订阅模式实现数据的双向绑定

通过Object.defineProperty方法对所有的数据进行数据劫持，就是给这些数据动态的添加了getter与setter方法。

在数据变化的时候发布消息给订阅者（Watcher），触发响应的监听回调。

扩展：

注意：Object.defineProperty有一些缺点：

1、对象属性的新加或者删除无法监听；

2、数组元素的增加和删除无法监听

针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺 点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。

删除无法监听；

2、数组元素的增加和删除无法监听

针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺 点就是，对IE不友好,所以vue3在检测到如果是使用IE的情况下（没错，IE11都不支持Proxy），会自动降级为Object.defineProperty的数据监听系统。