Vue响应式原理
作者:互联网
官网链接:https://cn.vuejs.org/v2/guide/reactivity.html
了解vue双向绑定原理之前,先了解一下 MV* 模式
笔记来源:http://www.linuxidc.com/Linux/2015-10/124622.htm
一、MV*
MVC
用户的对View操作以后,View捕获到这个操作,会把处理的权利交移给Controller(Pass calls);Controller接着会执行相关的业务逻辑, 这些业务逻辑可能需要对Model进行相应的操作;当Model变更了以后,会通过观察者模式(Observer Pattern)通知View; View通过观察者模式收到Model变更的消息以后,会向Model请求最新的数据,然后重新更新界面。- View是把控制权交移给Controller,自己不执行业务逻辑。
- Controller执行业务逻辑并且操作Model,但不会直接操作View,可以说它是对View无知的。
- View和Model的同步消息是通过观察者模式进行,而同步操作是由View自己请求Model的数据然后对视图进行更新。
MVC的优缺点
优点:- 把业务逻辑全部分离到Controller中,模块化程度高。当业务逻辑变更的时候,不需要变更View和Model,只需要Controller换成另外一个Controller就行了(Swappable Controller)。
- 观察者模式可以做到多视图同时更新。
- Controller测试困难。因为视图同步操作是由View自己执行,而View只能在有UI的环境下运行。在没有UI环境下对Controller进行单元测试的时候,Controller业务逻辑的正确性是无法验证的:Controller更新Model的时候,无法对View的更新操作进行断言。
- View无法组件化。View是强依赖特定的Model的,如果需要把这个View抽出来作为一个另外一个应用程序可复用的组件就困难了。因为不同程序的的Domain Model是不一样的
- View不再负责同步的逻辑,而是由Presenter负责。Presenter中既有业务逻辑也有同步逻辑。
- View需要提供操作界面的接口给Presenter进行调用。(关键)
- 便于测试。Presenter对View是通过接口进行,在对Presenter进行不依赖UI环境的单元测试的时候。可以通过Mock一个View对象,这个对象只需要实现了View的接口即可。然后依赖注入到Presenter中,单元测试的时候就可以完整的测试Presenter业务逻辑的正确性。这里根据上面的例子给出了Presenter的单元测试样例。
- View可以进行组件化。在MVP当中,View不依赖Model。这样就可以让View从特定的业务场景中脱离出来,可以说View可以做到对业务逻辑完全无知。它只需要提供一系列接口提供给上层操作。这样就可以做到高度可复用的View组件。
- Presenter中除了业务逻辑以外,还有大量的View->Model,Model->View的手动同步逻辑,造成Presenter比较笨重,维护起来比较困难。
- 提高可维护性。解决了MVP大量的手动View和Model同步的问题,提供双向绑定机制。提高了代码的可维护性。
- 简化测试。因为同步逻辑是交由Binder做的,View跟着Model同时变更,所以只需要保证Model的正确性,View就正确。大大减少了对View同步更新的测试。
- 过于简单的图形界面不适用,或说牛刀杀鸡。
- 对于大型的图形应用程序,视图状态较多,ViewModel的构建和维护的成本都会比较高。
- 数据绑定的声明是指令式地写在View的模版当中的,这些内容是没办法去打断点debug的。
- 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:vm.items.length = newLength
注意:vue3 的 变化
Object.defineProperty有以下缺点。 1、无法监听es6的Set、Map 变化; 2、无法监听Class类型的数据; 3、属性的新加或者删除也无法监听; 4、数组元素的增加和删除也无法监听。 针对Object.defineProperty的缺点,ES6 Proxy都能够完美得解决,它唯一的缺 点就是,对IE不友好,所以vue3在检测到如果是使用IE的情况下(没错,IE11都不 支持Proxy),会自动降级为Object.defineProperty的数据监听系统。标签:Vue,Presenter,vm,响应,原理,Model,property,View 来源: https://www.cnblogs.com/wuziqiang/p/14677928.html