滴滴前端一面必会vue面试题（附答案）

实现双向绑定

我们还是以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