本文为面试官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语音社群