Vue 2.3.4源码分析之视图渲染

最新推荐文章于 2024-05-15 07:00:00 发布

zhoulu_hp

最新推荐文章于 2024-05-15 07:00:00 发布

阅读量828

点赞数 1

分类专栏： Vue 文章标签： Vue Vue源码分析虚拟DOM

本文链接：https://blog.csdn.net/zhoulu001/article/details/79372555

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

最近公司一直使用Vue 2进行前端开发，正好趁最近时间空闲，阅读了一下vue源码。现在我看源码的理解记录如下。这篇博文主要分析视图渲染。

Vue 2视图渲染主要使用虚拟DOM实现的，流程如下：

1.在$mount方法中，首先判断是否提供了render方法，如果没有就需要解析模板生成一个render方法。

Vue$3.prototype.$mount = function (
  el,
  hydrating
) {
  el = el && query(el);

  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    "development" !== 'production' && warn(
      "Do not mount Vue to <html> or <body> - mount to normal elements instead."
    );
    return this
  }

  var options = this.$options;
  // resolve template/el and convert to render function
  if (!options.render) {//判断是否提供了render方法
    var template = options.template;
    if (template) {//判断是否提供了template模板
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template);
          /* istanbul ignore if */
          if ("development" !== 'production' && !template) {
            warn(
              ("Template element not found or is empty: " + (options.template)),
              this
            );
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML;
      } else {
        {
          warn('invalid template option:' + template, this);
        }
        return this
      }
    } else if (el) {
      template = getOuterHTML(el);//如果没有提供template就根据el.outerHTML生成一个template
    }
    if (template) {
      /* istanbul ignore if */
      if ("development" !== 'production' && config.performance && mark) {
        mark('compile');
      }

      var ref = compileToFunctions(template, {
        shouldDecodeNewlines: shouldDecodeNewlines,
        delimiters: options.delimiters
      }, this);
      var render = ref.render;//将模板解析生成的render方法
      var staticRenderFns = ref.staticRenderFns;
      options.render = render;
      options.staticRenderFns = staticRenderFns;

      /* istanbul ignore if */
      if ("development" !== 'production' && config.performance && mark) {
        mark('compile end');
        measure(((this._name) + " compile"), 'compile', 'compile end');
      }
    }
  }
  return mount.call(this, el, hydrating)
};

在该方法中，如果既没有提供render,也没有提供template,那么会根据我们传入的id，通过document.querySelector('#id').outerHTML生成一个template。所以render方法有三种方式得到，一种是我们程序员直接提供，这种方式不需要编译模板，最接近编译器，第二种就是我们提供一个template模块，第三种是我们不提供render和template,直接根据我们传入的id生成template。

拿到render方法后，vm._render会根据render方法生成VNode，Vnode就是虚拟DOM,然后调用vm._update创建真实的DOM

function mountComponent (
  vm,
  el,
  hydrating
) {
  vm.$el = el;
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode;
    {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        );
      } else {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        );
      }
    }
  }
  callHook(vm, 'beforeMount');

  var updateComponent;
  /* istanbul ignore if */
  if ("development" !== 'production' && config.performance && mark) {
    updateComponent = function () {
      var name = vm._name;
      var id = vm._uid;
      var startTag = "vue-perf-start:" + id;
      var endTag = "vue-perf-end:" + id;

      mark(startTag);
      var vnode = vm._render();
      mark(endTag);
      measure((name + " render"), startTag, endTag);

      mark(startTag);
      vm._update(vnode, hydrating);
      mark(endTag);
      measure((name + " patch"), startTag, endTag);
    };
  } else {
    updateComponent = function () {
      vm._update(vm._render(), hydrating);//vm._render()会根据render方法生成VNode,vm._update会根据VNode生成真是的DOM
    };
  }

  vm._watcher = new Watcher(vm, updateComponent, noop);
  hydrating = false;

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true;
    callHook(vm, 'mounted');
  }
  return vm
}

生成真实的DOM分为两种情况：

1.如果是初始化时，会直接调用createElm创建新真实的DOM;

2.如果是DOM的更新的话，需要进行Vnode的diff比较。首先会调用sameVnode(oldVnode,vnode)方法对新老vnode进行基本属性的比较，如果基本属性一样，说明是局部刷新，就进行diff比较，diff主要是patchVnode方法实现的,

function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    if (oldVnode === vnode) {
      return
    }

    var elm = vnode.elm = oldVnode.elm;

    if (isTrue(oldVnode.isAsyncPlaceholder)) {
      if (isDef(vnode.asyncFactory.resolved)) {
        hydrate(oldVnode.elm, vnode, insertedVnodeQueue);
      } else {
        vnode.isAsyncPlaceholder = true;
      }
      return
    }

    // reuse element for static trees.
    // note we only do this if the vnode is cloned -
    // if the new node is not cloned it means the render functions have been
    // reset by the hot-reload-api and we need to do a proper re-render.
    if (isTrue(vnode.isStatic) &&
      isTrue(oldVnode.isStatic) &&
      vnode.key === oldVnode.key &&
      (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
    ) {
      vnode.componentInstance = oldVnode.componentInstance;
      return
    }

    var i;
    var data = vnode.data;
    if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
      i(oldVnode, vnode);
    }

    var oldCh = oldVnode.children;
    var ch = vnode.children;
    if (isDef(data) && isPatchable(vnode)) {
      for (i = 0; i < cbs.update.length; ++i) { cbs.update[i](oldVnode, vnode); }//进行attrs，class,domlisener,style等更新
      if (isDef(i = data.hook) && isDef(i = i.update)) { i(oldVnode, vnode); }
    }
    if (isUndef(vnode.text)) {
      if (isDef(oldCh) && isDef(ch)) {
        if (oldCh !== ch) { updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly); }//如果新老vnode的子节点数组不相同，就执行updateChildren方法
      } else if (isDef(ch)) {//如果新vnode有子节点，老vnode没有，就新增新vnodes
        if (isDef(oldVnode.text)) { nodeOps.setTextContent(elm, ''); }
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
      } else if (isDef(oldCh)) {
        removeVnodes(elm, oldCh, 0, oldCh.length - 1);//如果新vnode没有子节点，老vnode有，就删除老vnodes
      } else if (isDef(oldVnode.text)) {
        nodeOps.setTextContent(elm, '');
      }
    } else if (oldVnode.text !== vnode.text) {
      nodeOps.setTextContent(elm, vnode.text);//如果text不相同，更新text
    }
    if (isDef(data)) {
      if (isDef(i = data.hook) && isDef(i = i.postpatch)) { i(oldVnode, vnode); }
    }
  }

在patchVnode中最后还执行了如下操作，将新vnode进行相关属性的更新,最后执行createElm更新dom

当然，data属性变化并不是立即更新dom,而是会延时批量更新，首页判断是否兼容Promise,否则判断是否兼容MutationOberver,如果都不兼容就是要setTimeout延时。但Promise和MutationOberver的性能要好于setTimeout(详情请参考：https://blog.csdn.net/zhoulu001/article/details/79531969)。

/**
 * Defer a task to execute it asynchronously.
 */
var nextTick = (function () {
  var callbacks = [];
  var pending = false;
  var timerFunc;

  function nextTickHandler () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
    for (var i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }

  // the nextTick behavior leverages the microtask queue, which can be accessed
  // via either native Promise.then or MutationObserver.
  // MutationObserver has wider support, however it is seriously bugged in
  // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
  // completely stops working after triggering a few times... so, if native
  // Promise is available, we will use it:
  /* istanbul ignore if */
  if (typeof Promise !== 'undefined' && isNative(Promise)) {
    var p = Promise.resolve();
    var logError = function (err) { console.error(err); };
    timerFunc = function () {
      p.then(nextTickHandler).catch(logError);
      // in problematic UIWebViews, Promise.then doesn't completely break, but
      // it can get stuck in a weird state where callbacks are pushed into the
      // microtask queue but the queue isn't being flushed, until the browser
      // needs to do some other work, e.g. handle a timer. Therefore we can
      // "force" the microtask queue to be flushed by adding an empty timer.
      if (isIOS) { setTimeout(noop); }
    };
  } else if (!isIE && typeof MutationObserver !== 'undefined' && (
    isNative(MutationObserver) ||
    // PhantomJS and iOS 7.x
    MutationObserver.toString() === '[object MutationObserverConstructor]'
  )) {
    // use MutationObserver where native Promise is not available,
    // e.g. PhantomJS, iOS7, Android 4.4
    var counter = 1;
    var observer = new MutationObserver(nextTickHandler);
    var textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
      characterData: true
    });
    timerFunc = function () {
      counter = (counter + 1) % 2;
      textNode.data = String(counter);
    };
  } else {
    // fallback to setTimeout
    /* istanbul ignore next */
    timerFunc = function () {
      setTimeout(nextTickHandler, 0);
    };
  }

zhoulu_hp

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 2.3.4源码分析之视图渲染

最近公司一直使用Vue 2进行前端开发，正好趁最近时间空闲，阅读了一下vue源码。现在我看源码的理解记录如下。这篇博文主要分析视图渲染。Vue 2视图渲染主要使用虚拟DOM实现的，流程如下：1.在$mount方法中，首先判断是否提供了render方法，如果没有就需要解析模板生成一个render方法。Vue$3.prototype.$mount = function ( el, hydrat...
复制链接

扫一扫

专栏目录