小言_互联网的博客

面试官:说说你对双向绑定的理解?

419人阅读  评论(0)

一、什么是双向绑定

我们先从单向绑定切入

单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新

双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了ViewModel的数据也自动被更新了,这种情况就是双向绑定

举个栗子

当用户填写表单时,View的状态就被更新了,如果此时可以自动更新Model的状态,那就相当于我们把ModelView做了双向绑定

关系图如下

二、双向绑定的原理是什么

我们都知道 Vue 是数据双向绑定的框架,双向绑定由三个重要部分构成

  • 数据层(Model):应用的数据及业务逻辑

  • 视图层(View):应用的展示效果,各类UI组件

  • 业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来

而上面的这个分层的架构方案,可以用一个专业术语进行称呼:MVVM

这里的控制层的核心功能便是 “数据双向绑定” 。自然,我们只需弄懂它是什么,便可以进一步了解数据绑定的原理

理解ViewModel

它的主要职责就是:

  • 数据变化后更新视图

  • 视图变化后更新数据

当然,它还有两个主要部分组成

  • 监听器(Observer):对所有数据的属性进行监听

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

三、实现双向绑定

我们还是以Vue为例,先来看看Vue中的双向绑定流程是什么的

  1. new Vue()首先执行初始化,对data执行响应化处理,这个过程发生Observe

  2. 同时对模板执行编译,找到其中动态绑定的数据,从data中获取并初始化视图,这个过程发生在Compile

  3. 同时定义⼀个更新函数和Watcher,将来对应数据变化时Watcher会调用更新函数

  4. 由于data的某个key在⼀个视图中可能出现多次,所以每个key都需要⼀个管家Dep来管理多个Watcher

  5. 将来data中数据⼀旦发生变化,会首先找到对应的Dep,通知所有Watcher执行更新函数

流程图如下:

实现

先来一个构造函数:执行初始化,对data执行响应化处理


   
  1. class Vue {
  2.   constructor(options) {
  3.     this.$options = options;
  4.     this.$data = options.data;
  5.       
  6.      // 对data选项做响应式处理
  7.     observe(this.$data);
  8.       
  9.      // 代理data到vm上
  10.     proxy(this);
  11.       
  12.      // 执行编译
  13.      new Compile(options.el, this);
  14.   }
  15. }

data选项执行响应化具体操作


   
  1. function observe(obj) {
  2.    if (typeof obj !==  "object" || obj == null) {
  3.      return;
  4.   }
  5.    new Observer(obj);
  6. }
  7. class Observer {
  8.   constructor(value) {
  9.     this.value = value;
  10.     this.walk(value);
  11.   }
  12.   walk(obj) {
  13.     Object.keys(obj).forEach((key) => {
  14.       defineReactive(obj, key, obj[key]);
  15.     });
  16.   }
  17. }

编译Compile

对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数


   
  1. class Compile {
  2.   constructor(el, vm) {
  3.     this.$vm = vm;
  4.     this.$el = document.querySelector(el);   // 获取dom
  5.      if (this.$el) {
  6.       this.compile(this.$el);
  7.     }
  8.   }
  9.   compile(el) {
  10.      const childNodes = el.childNodes; 
  11.     Array.from(childNodes).forEach((node) => {  // 遍历子元素
  12.        if (this.isElement(node)) {    // 判断是否为节点
  13.         console.log( "编译元素" + node.nodeName);
  14.       }  else  if (this.isInterpolation(node)) {
  15.         console.log( "编译插值⽂本" + node.textContent);   // 判断是否为插值文本 {{}}
  16.       }
  17.        if (node.childNodes && node.childNodes.length >  0) {   // 判断是否有子元素
  18.         this.compile(node);   // 对子元素进行递归遍历
  19.       }
  20.     });
  21.   }
  22.   isElement(node) {
  23.      return node.nodeType ==  1;
  24.   }
  25.   isInterpolation(node) {
  26.      return node.nodeType ==  3 && /\{\{(.*)\}\}/.test(node.textContent);
  27.   }
  28. }

依赖收集

视图中会用到data中某key,这称为依赖。同⼀个key可能出现多次,每次都需要收集出来用⼀个Watcher来维护它们,此过程称为依赖收集

多个Watcher需要⼀个Dep来管理,需要更新时由Dep统⼀通知

实现思路

  1. defineReactive时为每⼀个key创建⼀个Dep实例

  2. 初始化视图时读取某个key,例如name1,创建⼀个watcher1

  3. 由于触发name1getter方法,便将watcher1添加到name1对应的Dep中

  4. name1更新,setter触发时,便可通过对应Dep通知其管理所有Watcher更新


   
  1. // 负责更新视图
  2. class Watcher {
  3.   constructor(vm, key, updater) {
  4.     this.vm = vm
  5.     this.key = key
  6.     this.updaterFn = updater
  7.      // 创建实例时,把当前实例指定到Dep.target静态属性上
  8.     Dep.target = this
  9.      // 读一下key,触发get
  10.     vm[key]
  11.      // 置空
  12.     Dep.target = null
  13.   }
  14.    // 未来执行dom更新函数,由dep调用的
  15.   update() {
  16.     this.updaterFn.call(this.vm, this.vm[this.key])
  17.   }
  18. }

声明Dep


   
  1. class Dep {
  2.   constructor() {
  3.     this.deps = [];   // 依赖管理
  4.   }
  5.   addDep(dep) {
  6.     this.deps.push(dep);
  7.   }
  8.   notify() { 
  9.     this.deps.forEach((dep) => dep.update());
  10.   }
  11. }

创建watcher时触发getter


   
  1. class Watcher {
  2.   constructor(vm, key, updateFn) {
  3.     Dep.target = this;
  4.     this.vm[this.key];
  5.     Dep.target = null;
  6.   }
  7. }

依赖收集,创建Dep实例


   
  1. function defineReactive(obj, key, val) {
  2.   this.observe(val);
  3.    const dep =  new Dep();
  4.   Object.defineProperty(obj, key, {
  5.     get() {
  6.       Dep.target && dep.addDep(Dep.target); // Dep.target也就是Watcher实例
  7.        return val;
  8.     },
  9.     set(newVal) {
  10.        if (newVal === val)  return;
  11.       dep.notify();  // 通知dep执行更新方法
  12.     },
  13.   });
  14. }

参考文献

  • https://www.liaoxuefeng.com/wiki/1022910821149312/1109527162256416

  • https://juejin.cn/post/6844903942254510087#heading-9

面试官VUE系列总进度:3/33

面试官:说说你对vue的理解?

面试官:说说你对SPA(单页应用)的理解?


转载:https://blog.csdn.net/weixin_44475093/article/details/110252376
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场