关于vue.js:面试官说说你对双向绑定的理解

本文为面试官 VUE 系列
总进度：3/33

一、什么是双向绑定

咱们先从单向绑定切入

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

双向绑定就很容易联想到了，在单向绑定的根底，用户更新了 View，Model 的数据也主动被更新了，这种状况就是双向绑定

举个栗子

当用户填写表单时，View的状态就被更新了，如果此时能够自动更新 Model 的状态，那就相当于咱们把 Model 和View做了双向绑定

关系图如下

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

咱们都晓得 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 执行响应化解决

class Vue {constructor(options) {
    this.$options = options;
    this.$data = options.data;
      
    // 对 data 选项做响应式解决
    observe(this.$data);
      
    // 代理 data 到 vm 上
    proxy(this);
      
    // 执行编译
    new Compile(options.el, this);
  }
}

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

function observe(obj) {if (typeof obj !== "object" || obj == null) {return;}
  new Observer(obj);
}

class Observer {constructor(value) {
    this.value = value;
    this.walk(value);
  }
  walk(obj) {Object.keys(obj).forEach((key) => {defineReactive(obj, key, obj[key]);
    });
  }
}

编译Compile

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

class Compile {constructor(el, vm) {
    this.$vm = vm;
    this.$el = document.querySelector(el);  // 获取 dom
    if (this.$el) {this.compile(this.$el);
    }
  }
  compile(el) {
    const childNodes = el.childNodes; 
    Array.from(childNodes).forEach((node) => { // 遍历子元素
      if (this.isElement(node)) {   // 判断是否为节点
        console.log("编译元素" + node.nodeName);
      } else if (this.isInterpolation(node)) {console.log("编译插值⽂本" + node.textContent);  // 判断是否为插值文本 {{}}
      }
      if (node.childNodes && node.childNodes.length > 0) {  // 判断是否有子元素
        this.compile(node);  // 对子元素进行递归遍历
      }
    });
  }
  isElement(node) {return node.nodeType == 1;}
  isInterpolation(node) {return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);
  }
}

依赖收集

视图中会用到 data 中某 key，这称为依赖。同⼀个key 可能呈现屡次，每次都须要收集进去用⼀个 Watcher 来保护它们，此过程称为依赖收集

多个 Watcher 须要⼀个 Dep 来治理，须要更新时由 Dep 统⼀告诉

实现思路

1. defineReactive时为每⼀个 key 创立⼀个 Dep 实例
2. 初始化视图时读取某个key，例如name1，创立⼀个watcher1
3. 因为触发 name1 的getter办法，便将 watcher1 增加到 name1 对应的 Dep 中
4. 当 name1 更新，setter触发时，便可通过对应 Dep 告诉其治理所有 Watcher 更新

// 负责更新视图
class Watcher {constructor(vm, key, updater) {
    this.vm = vm
    this.key = key
    this.updaterFn = updater

    // 创立实例时，把以后实例指定到 Dep.target 动态属性上
    Dep.target = this
    // 读一下 key，触发 get
    vm[key]
    // 置空
    Dep.target = null
  }

  // 将来执行 dom 更新函数，由 dep 调用的
  update() {this.updaterFn.call(this.vm, this.vm[this.key])
  }
}

申明Dep

class Dep {constructor() {this.deps = [];  // 依赖治理
  }
  addDep(dep) {this.deps.push(dep);
  }
  notify() {this.deps.forEach((dep) => dep.update());
  }
}

创立 watcher 时触发getter

class Watcher {constructor(vm, key, updateFn) {
    Dep.target = this;
    this.vm[this.key];
    Dep.target = null;
  }
}

依赖收集，创立 Dep 实例

function defineReactive(obj, key, val) {this.observe(val);
  const dep = new Dep();
  Object.defineProperty(obj, key, {get() {Dep.target && dep.addDep(Dep.target);// Dep.target 也就是 Watcher 实例
      return val;
    },
    set(newVal) {if (newVal === val) return;
      dep.notify(); // 告诉 dep 执行更新办法},
  });
}

参考文献

• https://www.liaoxuefeng.com/w…
• https://juejin.cn/post/684490…
• https://vue3js.cn

@JS 语音社群