Vue响应式原理---双向绑定

一、Vue中的响应式

Vue最独特的特性之一,是其非侵入行的响应式系统。数据模型仅仅是普通的JavaScript对象,而当修改它们时,视图会进行更新。

二、响应式的基本原理—双向绑定

双向绑定,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新,在单向绑定的基础上,如果用户更新了ViewModel的数据也会自动更新。

双向绑定由三个重要部分构成:

  • 数据层(Model):应用数据及业务逻辑
  • 视图层(View):应用的展示效果,各类UI组件
  • 业务逻辑层(ViewModel):框架封装的核心,负责将数据与视图关联起来

ViewModel

作用:

  • 数据变化更新视图
  • 视图变化更新数据

它还有两个主要部分组成:

  • 监听器(Observer):对所有数据的属性进行监听
  • 解析器(Compiler):对每个节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

双向绑定的基本原理

  1. 通过Object.defineProperty来实现监听数据的改变和读取(属性中的setter和getter方法)实现数据劫持。

  2. 观察者模式(发布者 - 订阅者)
    观察者(订阅者)Watcher:
    update():当事件发生时,具体要做的事情。
    目标(发布者)Dep:
    (1)subs数组:存储所有的观察者
    (2)addSub():添加观察者
    (3)notify():当事件发生时,调用所有观察者的update()方法

  3. 当数据发生改变通过发布者-订阅者模式来进行通知,进行试图更新。

三、响应过程

Vue响应式原理---双向绑定_第1张图片

首先要对数据(data)进行劫持监听,所以需要设置一个监听器Observer,用来监听所有的属性。
如果属性发生变化,需要通知订阅者Watcher,看是否需要更新。因为订阅者有多个,所以需要一个消息订阅器(发布者)Dep(订阅者集合的管理数组)来专门收集这些订阅者,在Observer和Watcher之间进行统一管理。
还需要一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令初始化为一个订阅者Watcher,并替换模板数据或绑定相应的函数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。

Vue中的data的每个属性都会被创建一个Dep对象,并且解析el是进行视图的初始化,如果html中有多个地方用到该属性,则每个地方都会生成一个Watcher的实例被放入到该属性对应Dep实例中的subs数组中。当属性发生变化时,Observer监听到属性的改变,然后调用该属性对应的Dep实例的notify()方法,对Dep实例中的数组进行遍历,同时调用遍历出的Watcher实例进行update()方法的调用,进行视图的更新。

总结为以下三个步骤:
1、实现一个监听器Observer,用来劫持并监听所有属性,如果发生变化,就通知订阅者。
2、实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3、实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并据此初始化视图和订阅器Watcher。

参考链接:https://wenku.baidu.com/view/6ca3cedb07a1b0717fd5360cba1aa81144318f24.html

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