【Vue2.x 源码学习】第二十八篇 - diff 算法 - 问题分析与 patch 优化

// src/init.js
Vue.prototype.$mount = function (el) {    const vm = this;    const opts = vm.$options;    el = document.querySelector(el); // 获取真实的元素    vm.$el = el; // vm.$el 表示当前页面上的真实元素
    // 如果没有 render, 看 template    if (!opts.render) {      // 如果没有 template, 采用元素内容      let template = opts.template;      if (!template) {        // 拿到整个元素标签,将模板编译为 render 函数        template = el.outerHTML;      }      let render = compileToFunction(template);      opts.render = render;    }
    mountComponent(vm);  }

// src/lifeCycle.js
export function mountComponent(vm) {
  let updateComponent = ()=>{    vm._update(vm._render());    }  // 当视图渲染前，调用钩子: beforeCreate  callHook(vm, 'beforeCreate');
  // 渲染 watcher ：每个组件都有一个 watcher  new Watcher(vm, updateComponent, ()=>{    // 视图更新后，调用钩子: created    callHook(vm, 'created');  },true)
   // 当视图挂载完成，调用钩子: mounted   callHook(vm, 'mounted');}

// src/observe/index.js
function defineReactive(obj, key, value) {  // childOb 是数据组进行观测后返回的结果，内部 new Observe 只处理数组或对象类型  let childOb = observe(value);// 递归实现深层观测  let dep = new Dep();  // 为每个属性添加一个 dep  Object.defineProperty(obj, key, {    // get方法构成闭包：取obj属性时需返回原值value，    // value会查找上层作用域的value，所以defineReactive函数不能被释放销毁    get() {      if(Dep.target){        // 对象属性的依赖收集        dep.depend();        // 数组或对象本身的依赖收集        if(childOb){  // 如果 childOb 有值，说明数据是数组或对象类型          // observe 方法中，会通过 new Observe 为数组或对象本身添加 dep 属性          childOb.dep.depend();    // 让数组和对象本身的 dep 记住当前 watcher          if(Array.isArray(value)){// 如果当前数据是数组类型            // 可能数组中继续嵌套数组，需递归处理            dependArray(value)          }          }      }      return value;    },    set(newValue) { // 确保新对象为响应式数据：如果新设置的值为对象，需要再次进行劫持      console.log("修改了被观测属性 key = " + key + ", newValue = " + JSON.stringify(newValue))      if (newValue === value) return      observe(newValue);  // observe方法：如果是对象，会 new Observer 深层观测      value = newValue;      dep.notify(); // 通知当前 dep 中收集的所有 watcher 依次执行视图更新    }  })}

class Dep {  constructor(){    this.id = id++;    this.subs = [];  }  // 让 watcher 记住 dep（查重），再让 dep 记住 watcher  depend(){    Dep.target.addDep(this);    }  // 让 dep 记住 watcher - 在 watcher 中被调用  addSub(watcher){    this.subs.push(watcher);  }  // dep 中收集的全部 watcher 依次执行更新方法 update  notify(){    this.subs.forEach(watcher => watcher.update())  }}

// src/observe/watcher.js
class Watcher {  constructor(vm, fn, cb, options){    this.vm = vm;    this.fn = fn;    this.cb = cb;    this.options = options;
    this.id = id++;   // watcher 唯一标记    this.depsId = new Set();  // 用于当前 watcher 保存 dep 实例的唯一id    this.deps = []; // 用于当前 watcher 保存 dep 实例    this.getter = fn; // fn 为页面渲染逻辑    this.get();  }  addDep(dep){    let did = dep.id;    // dep 查重     if(!this.depsId.has(did)){      // 让 watcher 记住 dep      this.depsId.add(did);      this.deps.push(dep);      // 让 dep 也记住 watcher      dep.addSub(this);     }  }  get(){    Dep.target = this;  // 在触发视图渲染前，将 watcher 记录到 Dep.target 上    this.getter();      // 调用页面渲染逻辑    Dep.target = null;  // 渲染完成后，清除 Watcher 记录  }  update(){    console.log("watcher-update", "查重并缓存需要更新的 watcher")    queueWatcher(this);  }  run(){    console.log("watcher-run", "真正执行视图更新")    this.get();  }}

// src/observe/scheduler.js
/** * 将 watcher 进行查重并缓存，最后统一执行更新 * @param {*} watcher 需更新的 watcher */export function queueWatcher(watcher) {  let id = watcher.id;  if (has[id] == null) {    has[id] = true;    queue.push(watcher);  // 缓存住watcher,后续统一处理    if (!pending) {       // 等效于防抖      nextTick(flushschedulerQueue);      pending = true;     // 首次进入被置为 true，使微任务执行完成后宏任务才执行    }  }}
/** * 刷新队列：执行所有 watcher.run 并将队列清空； */function flushschedulerQueue() {  // 更新前,执行生命周期：beforeUpdate  queue.forEach(watcher => watcher.run()) // 依次触发视图更新  queue = [];       // reset  has = {};         // reset  pending = false;  // reset  // 更新完成,执行生命周期：updated}

// src/lifeCycle.js
export function mountComponent(vm) {
  let updateComponent = ()=>{    vm._update(vm._render());    }  // 当视图渲染前，调用钩子: beforeCreate  callHook(vm, 'beforeCreate');
  // 渲染 watcher ：每个组件都有一个 watcher  new Watcher(vm, updateComponent, ()=>{    // 视图更新后，调用钩子: created    callHook(vm, 'created');  },true)
   // 当视图挂载完成，调用钩子: mounted   callHook(vm, 'mounted');}

// src/lifeCycle.js
export function lifeCycleMixin(Vue){  Vue.prototype._update = function (vnode) {    const vm = this;    // 传入当前真实元素vm.$el，虚拟节点vnode，返回新的真实元素    vm.$el = patch(vm.$el, vnode);  }}

当前的 patch 方法，仅考虑了初始化的情况，还需要处理更新操作patch 方法需要对新老虚拟节点进行一次比对，尽可能复用原有节点，以提升渲染性能

// src/index.js
// 1,生成第一个虚拟节点// new Vue会对数据进行劫持let vm1 = new Vue({    data(){        return {name:'Brave'}    }})// 将模板 render1 生成为 render 函数let render1 = compileToFunction('<div>{{name}}</div>');// 调用 compileToFunction，将模板生成 render 函数，会解析模板，最终包成一个 function// 调用 render 函数，产生虚拟节点let oldVnode = render1.call(vm1)    // oldVnode:第一次的虚拟节点// 将虚拟节点生成真实节点let el1 = createElm(oldVnode);// 将真实节点渲染到页面上document.body.appendChild(el1);

// src/index.js
// 2，生成第二个虚拟节点let vm2 = new Vue({    data(){        return {name:'BraveWang'}    }})let render2 = compileToFunction('<p>{{name}}</p>');let newVnode = render2.call(vm2);
// 延迟看效果：初始化完成显示 el1，1 秒后移除 el1 显示 el2setTimeout(()=>{    let el2 = createElm(newVnode);    document.body.removeChild(el1);    document.body.appendChild(el2);}, 1000);
export default Vue;

// 如果标签名一样就复用// 3,调用 patch 方法进行比对setTimeout(()=>{    // 比对新老虚拟节点的差异，尽可能复用原有节点，以提升渲染性能    patch(oldVnode,newVnode); }, 1000);

let vm = new Vue({    data(){        return {name:'Brave'}    }})let render = compileToFunction('<div>{{name}}</div>');/let oldVnode = render.call(vm)let el = createElm(oldVnode);document.body.appendChild(el);
// 数据更新后，再次调用 render 函数vm.name = 'BraveWang';let newVnode = render.call(vm);
setTimeout(()=>{    patch(oldVnode, newVnode); }, 1000);

export function patch(el, vnode) {  // 1，根据虚拟节点创建真实节点  const elm = createElm(vnode);  // 2，使用真实节点替换掉老节点  // 找到元素的父亲节点  const parentNode = el.parentNode;  // 找到老节点的下一个兄弟节点（nextSibling 若不存在将返回 null）  const nextSibling = el.nextSibling;  // 将新节点elm插入到老节点el的下一个兄弟节点nextSibling的前面  // 备注：若nextSibling为 null，insertBefore 等价与 appendChild  parentNode.insertBefore(elm, nextSibling);   // 删除老节点 el  parentNode.removeChild(el);
  return elm;}

当前patch方法的两个入参分别是：元素和虚拟节点将虚拟节点创建为真实节点，直接进行元素替换，完成数据更新
现在需要将新老虚拟节点进行比对，尽可能复用原有节点，提高渲染性能所以patch方法需改造为入参是新老虚拟节点：oldVnode、vnode
当前的 patch 方法仅考虑到初始化的情况；现在还需要支持数据更新的情况；

export function patch(oldVnode, vnode) {  const elm = createElm(vnode);  const parentNode = oldVnode.parentNode;  parentNode.insertBefore(elm, oldVnode.nextSibling);   parentNode.removeChild(oldVnode);    return elm;}

通过判断 oldVnode.nodeType 节点类型是否为真实节点；是真实节点，需要进行新老虚拟节点比对非真实节点，即为真实dom时，进行初渲染逻辑

export function patch(oldVnode, vnode) {  const isRealElement = oldVnode.nodeType;  if(isRealElement){// 真实节点，走老逻辑    const elm = createElm(vnode);    const parentNode = oldVnode.parentNode;;    parentNode.insertBefore(elm, oldVnode.nextSibling);     parentNode.removeChild(oldVnode);    return elm;  }else{// 虚拟节点：做 diff 算法，新老节点比对    console.log(oldVnode, vnode)  }}