Vue中各个生命周期阶段的源码探究--beforeMount阶段

最新推荐文章于 2024-04-29 02:57:12 发布
最新推荐文章于 2024-04-29 02:57:12 发布
阅读量2.5k 收藏
点赞数 1
文章标签： vue beforeMount
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangkaige111/article/details/84474812
版权

前面已经讲到了beforeCreate和created阶段，现在来分析一下beforeMount阶段，见名知义，就是元素挂载之前，来看一下这里主要做了什么。
所用代码如下，vue版本v2.5.17-beta.0

<div id="box">
	I love vue
	<ul>
		<li v-for="item in data" @click="logChange(item.NAME,item.AGE)">
			{{item.NAME}}
		</li>
	</ul>
</div>

//js
new Vue({
	el: '#box',
	data: {
		data:[
			{NAME:'SDF',AGE:3},
			{NAME:'JIKU',AGE:6},
			{NAME:'HYF',AGE:3}
		]
	},
	methods: {
		logChange: function(name,age) {
			console.log(name,age);
		}
	}
	
});

一、从页面中获取HTML模板

function query (el) {
  if (typeof el === 'string') {
    var selected = document.querySelector(el);
    if (!selected) {
      "development" !== 'production' && warn(
        'Cannot find element: ' + el
      );
      return document.createElement('div')
    }
    return selected
  } else {
    return el
  }
}

这里参数el是我们传入了一个选择器，也可以是一个DOM节点。如果是一个选择，就会执行document.querySelector(el);语句获取DOM元素，否则就直接返回传入的DOM元素。然后会判断传入的选项对象中有没有render函数和template项，如果 没有就是直接获取元素的outerHTML。

function getOuterHTML (el) {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    var container = document.createElement('div');
    container.appendChild(el.cloneNode(true));
    return container.innerHTML
  }
}

上述方法为获取元素的outerHTML方法。完整方法为：

Vue.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) {
    var template = options.template;
    if (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);
    }
    if (template) {
      /* istanbul ignore if */
      if ("development" !== 'production' && config.performance && mark) {
        mark('compile');
      }
      var ref = compileToFunctions(template, {
        shouldDecodeNewlines: shouldDecodeNewlines,
        shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this);
      var render = ref.render;
      var staticRenderFns = ref.staticRenderFns;
      options.render = render;
      options.staticRenderFns = staticRenderFns;

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

二、将HTML模板编译成渲染函数

编译成渲染函数是调用以下语句,当然这里面还有涉及到一系列的操作。

 var ref = compileToFunctions(template, {
     shouldDecodeNewlines: shouldDecodeNewlines,
      shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
      delimiters: options.delimiters,
      comments: options.comments
    }, this);

2.1、根据HTML模板生成AST（抽象语法树）

这里调用一个叫parseHTML的函数

parseHTML(template, {
    warn: warn$2,
    expectHTML: options.expectHTML,
    isUnaryTag: options.isUnaryTag,
    canBeLeftOpenTag: options.canBeLeftOpenTag,
    shouldDecodeNewlines: options.shouldDecodeNewlines,
    shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
    shouldKeepComment: options.comments,
    start: function start (tag, attrs, unary) {
      // check namespace.
      // inherit parent ns if there is one
     
      var ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag);

      // handle IE svg bug
      /* istanbul ignore if */
      if (isIE && ns === 'svg') {
        attrs = guardIESVGBug(attrs);
      }

      var element = createASTElement(tag, attrs, currentParent);
      if (ns) {
        element.ns = ns;
      }

      if (isForbiddenTag(element) && !isServerRendering()) {
        element.forbidden = true;
        "development" !== 'production' && warn$2(
          'Templates should only be responsible for mapping the state to the ' +
          'UI. Avoid placing tags with side-effects in your templates, such as ' +
          "<" + tag + ">" + ', as they will not be parsed.'
        );
      }

      // apply pre-transforms
      for (var i = 0; i < preTransforms.length; i++) {
        element = preTransforms[i](element, options) || element;
      }

      if (!inVPre) {
        processPre(element);
        if (element.pre) {
          inVPre = true;
        }
      }
      if (platformIsPreTag(element.tag)) {
        inPre = true;
      }
      if (inVPre) {
        processRawAttrs(element);
      } else if (!element.processed) {
        // structural directives
        processFor(element);
        processIf(element);
        processOnce(element);
        // element-scope stuff
        processElement(element, options);
      }

      function checkRootConstraints (el) {
        {
          if (el.tag === 'slot' || el.tag === 'template') {
            warnOnce(
              "Cannot use <" + (el.tag) + "> as component root element because it may " +
              'contain multiple nodes.'
            );
          }
          if (el.attrsMap.hasOwnProperty('v-for')) {
            warnOnce(
              'Cannot use v-for on stateful component root element because ' +
              'it renders multiple elements.'
            );
          }
        }
      }

      // tree management
      if (!root) {
        root = element;
        checkRootConstraints(root);
      } else if (!stack.length) {
        // allow root elements with v-if, v-else-if and v-else
        if (root.if && (element.elseif || element.else)) {
          checkRootConstraints(element);
          addIfCondition(root, {
            exp: element.elseif,
            block: element
          });
        } else {
          warnOnce(
            "Component template should contain exactly one root element. " +
            "If you are using v-if on multiple elements, " +
            "use v-else-if to chain them instead."
          );
        }
      }
      if (currentParent && !element.forbidden) {
        if (element.elseif || element.else) {
          processIfConditions(element, currentParent);
        } else if (element.slotScope) { // scoped slot
          currentParent.plain = false;
          var name = element.slotTarget || '"default"';(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
        } else {
          currentParent.children.push(element);
          element.parent = currentParent;
        }
      }
      if (!unary) {
        currentParent = element;
        stack.push(element);
      } else {
        closeElement(element);
      }
    },

    end: function end () {
      // remove trailing whitespace
      var element = stack[stack.length - 1];
      var lastNode = element.children[element.children.length - 1];
      if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
        element.children.pop();
      }
      // pop stack
      stack.length -= 1;
      currentParent = stack[stack.length - 1];
      closeElement(element);
    },

    chars: function chars (text) {
      if (!currentParent) {
        {
          if (text === template) {
            warnOnce(
              'Component template requires a root element, rather than just text.'
            );
          } else if ((text = text.trim())) {
            warnOnce(
              ("text \"" + text + "\" outside root element will be ignored.")
            );
          }
        }
        return
      }
      // IE textarea placeholder bug
      /* istanbul ignore if */
      if (isIE &&
        currentParent.tag === 'textarea' &&
        currentParent.attrsMap.placeholder === text
      ) {
        return
      }
      var children = currentParent.children;
      text = inPre || text.trim()
        ? isTextTag(currentParent) ? text : decodeHTMLCached(text)
        // only preserve whitespace if its not right after a starting tag
        : preserveWhitespace && children.length ? ' ' : '';
      if (text) {
        var res;
        if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
          children.push({
            type: 2,
            expression: res.expression,
            tokens: res.tokens,
            text: text
          });
        } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
          children.push({
            type: 3,
            text: text
          });
        }
      }
    },
    comment: function comment (text) {
      currentParent.children.push({
        type: 3,
        text: text,
        isComment: true
      });
    }
  });

这个函数包含了start,end,chars,comment回调，分别用于对开始标签，结束标签，文本节点，注释节点的处理。
这个函数里面通过一个循环来处理HTML模板：

while (html) {
    last = html;
    // Make sure we're not in a plaintext content element like script/style
    if (!lastTag || !isPlainTextElement(lastTag)) {
      var textEnd = html.indexOf('<');
      if (textEnd === 0) {
        // Comment:
        if (comment.test(html)) {
          var commentEnd = html.indexOf('-->');

          if (commentEnd >= 0) {
            if (options.shouldKeepComment) {
              options.comment(html.substring(4, commentEnd));
            }
            advance(commentEnd + 3);
            continue
          }
        }

        // http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
        if (conditionalComment.test(html)) {
          var conditionalEnd = html.indexOf(']>');

          if (conditionalEnd >= 0) {
            advance(conditionalEnd + 2);
            continue
          }
        }

        // Doctype:
        var doctypeMatch = html.match(doctype);
        if (doctypeMatch) {
          advance(doctypeMatch[0].length);
          continue
        }

        // End tag:
        var endTagMatch = html.match(endTag);
        if (endTagMatch) {
          var curIndex = index;
          advance(endTagMatch[0].length);
          parseEndTag(endTagMatch[1], curIndex, index);
          continue
        }

        // Start tag:
        var startTagMatch = parseStartTag();
        if (startTagMatch) {
          handleStartTag(startTagMatch);
          if (shouldIgnoreFirstNewline(lastTag, html)) {
            advance(1);
          }
          continue
        }
      }

      var text = (void 0), rest = (void 0), next = (void 0);
      if (textEnd >= 0) {
        rest = html.slice(textEnd);
        while (
          !endTag.test(rest) &&
          !startTagOpen.test(rest) &&
          !comment.test(rest) &&
          !conditionalComment.test(rest)
        ) {
          // < in plain text, be forgiving and treat it as text
          next = rest.indexOf('<', 1);
          if (next < 0) { break }
          textEnd += next;
          rest = html.slice(textEnd);
        }
        text = html.substring(0, textEnd);
        advance(textEnd);
      }

      if (textEnd < 0) {
        text = html;
        html = '';
      }

      if (options.chars && text) {
        options.chars(text);
      }
    } else {
      var endTagLength = 0;
      var stackedTag = lastTag.toLowerCase();
      var reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'));
      var rest$1 = html.replace(reStackedTag, function (all, text, endTag) {
        endTagLength = endTag.length;
        if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
          text = text
            .replace(/<!\--([\s\S]*?)-->/g, '$1') // #7298
            .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1');
        }
        if (shouldIgnoreFirstNewline(stackedTag, text)) {
          text = text.slice(1);
        }
        if (options.chars) {
          options.chars(text);
        }
        return ''
      });
      index += html.length - rest$1.length;
      html = rest$1;
      parseEndTag(stackedTag, index - endTagLength, index);
    }

    if (html === last) {
      options.chars && options.chars(html);
      if ("development" !== 'production' && !stack.length && options.warn) {
        options.warn(("Mal-formatted tag at end of template: \"" + html + "\""));
      }
      break
    }
  }

在这个循环中，所用到的用于提取开始标签，结束标签，标签属性，注释，条件注释，DOCTYPE的正则为

// Regular Expressions for parsing tags and attributes
var attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
// could use https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName
// but for Vue templates we can enforce a simple charset
var ncname = '[a-zA-Z_][\\w\\-\\.]*';
var qnameCapture = "((?:" + ncname + "\\:)?" + ncname + ")";
var startTagOpen = new RegExp(("^<" + qnameCapture));
var startTagClose = /^\s*(\/?)>/;
var endTag = new RegExp(("^<\\/" + qnameCapture + "[^>]*>"));
var doctype = /^<!DOCTYPE [^>]+>/i;
// #7298: escape - to avoid being pased as HTML comment when inlined in page
var comment = /^<!\--/;
var conditionalComment = /^<!\[/;

从这里可以看出，标签属性可以不用带值，如果要设置值可以用双引号，单引号，或不用引号，标签名必须是字母或下划线开头，可以带标签前缀例如：<prefix:tag></prefix:tag>
再逐步分析一下。
这里刚开始的时候会解析<div id="box">开始标签，借助parseStartTag方法，通过以下正则提取

var ncname = '[a-zA-Z_][\\w\\-\\.]*';
var qnameCapture = "((?:" + ncname + "\\:)?" + ncname + ")";
var startTagOpen = new RegExp(("^<" + qnameCapture));


 function parseStartTag () {
    var start = html.match(startTagOpen);
    if (start) {
      var match = {
        tagName: start[1],
        attrs: [],
        start: index
      };
      advance(start[0].length);
      var end, attr;
      while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
        advance(attr[0].length);
        match.attrs.push(attr);
      }
      if (end) {
        match.unarySlash = end[1];
        advance(end[0].length);
        match.end = index;
        return match
      }
    }
  }

得到的结果如下图所示
在这里插入图片描述
提取完开始标签后，再对HTML模板字符串作一下截取处理这里是通过advance函数处理。

 function advance (n) {
    index += n;
    html = html.substring(n);
  }

index += n;是将下标移到发生匹配的最后一个位置的下一位置。html = html.substring(n);是截取剩余未进行匹配处理的字符串。
开始标签提取完成后，下步就是循环提取标签属性

var end, attr;
while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
   advance(attr[0].length);
   match.attrs.push(attr);
 }

这个循环中，在提取标签属性的同时也会判断是否到了单标签的结束标签，当得到一个标签属性后，也会对模板字符串作截取处理和index匹配位置的后移，然后再放到一个数组中，最终从开始标签<div id="box">得到的信息为
在这里插入图片描述
attrs是存有标签属性的数组，end是该整个开始标签的下一个匹配位置，start是该开始标签发生匹配的第一个位置，tagName是匹配的标签名。

2.1.1、对开始标签进行处理（parseStartTag ()函数处理）

function handleStartTag (match) {
    var tagName = match.tagName;
    var unarySlash = match.unarySlash;

    if (expectHTML) {
      if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
        parseEndTag(lastTag);
      }
      if (canBeLeftOpenTag$$1(tagName) && lastTag === tagName) {
        parseEndTag(tagName);
      }
    }

    var unary = isUnaryTag$$1(tagName) || !!unarySlash;

    var l = match.attrs.length;
    var attrs = new Array(l);
    for (var i = 0; i < l; i++) {
      var args = match.attrs[i];
      // hackish work around FF bug https://bugzilla.mozilla.org/show_bug.cgi?id=369778
      if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) {
        if (args[3] === '') { delete args[3]; }
        if (args[4] === '') { delete args[4]; }
        if (args[5] === '') { delete args[5]; }
      }
      var value = args[3] || args[4] || args[5] || '';
      var shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
        ? options.shouldDecodeNewlinesForHref
        : options.shouldDecodeNewlines;
      attrs[i] = {
        name: args[1],
        value: decodeAttr(value, shouldDecodeNewlines)
      };
    }

    if (!unary) {
      stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs });
      lastTag = tagName;
    }

    if (options.start) {
    	
      options.start(tagName, attrs, unary, match.start, match.end);
    }
  }

该函数会根据解析出来的开始标签做进一步处理，主要是生成一个关于属性的对象数组，再判断该标签是否是单标签，如果不是则将该标签的信息压到一个栈中。即stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs });,这个压栈操作，是为了在处理到结束标签时能找到它对应的开始标签。最后再执行options选项传进来的回调start函数

2.1.2、执行start回调，生成AST元素节点

start: function start (tag, attrs, unary) {
      // check namespace.
      // inherit parent ns if there is one
     
      var ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag);

      // handle IE svg bug
      /* istanbul ignore if */
      if (isIE && ns === 'svg') {
        attrs = guardIESVGBug(attrs);
      }

      var element = createASTElement(tag, attrs, currentParent);
      if (ns) {
        element.ns = ns;
      }

      if (isForbiddenTag(element) && !isServerRendering()) {
        element.forbidden = true;
        "development" !== 'production' && warn$2(
          'Templates should only be responsible for mapping the state to the ' +
          'UI. Avoid placing tags with side-effects in your templates, such as ' +
          "<" + tag + ">" + ', as they will not be parsed.'
        );
      }

      // apply pre-transforms
      for (var i = 0; i < preTransforms.length; i++) {
        element = preTransforms[i](element, options) || element;
      }

      if (!inVPre) {
        processPre(element);
        if (element.pre) {
          inVPre = true;
        }
      }
      if (platformIsPreTag(element.tag)) {
        inPre = true;
      }
      if (inVPre) {
        processRawAttrs(element);
      } else if (!element.processed) {
        // structural directives
        processFor(element);
        processIf(element);
        processOnce(element);
        // element-scope stuff
        processElement(element, options);
      }

      function checkRootConstraints (el) {
        {
          if (el.tag === 'slot' || el.tag === 'template') {
            warnOnce(
              "Cannot use <" + (el.tag) + "> as component root element because it may " +
              'contain multiple nodes.'
            );
          }
          if (el.attrsMap.hasOwnProperty('v-for')) {
            warnOnce(
              'Cannot use v-for on stateful component root element because ' +
              'it renders multiple elements.'
            );
          }
        }
      }

      // tree management
      if (!root) {
        root = element;
        checkRootConstraints(root);
      } else if (!stack.length) {
        // allow root elements with v-if, v-else-if and v-else
        if (root.if && (element.elseif || element.else)) {
          checkRootConstraints(element);
          addIfCondition(root, {
            exp: element.elseif,
            block: element
          });
        } else {
          warnOnce(
            "Component template should contain exactly one root element. " +
            "If you are using v-if on multiple elements, " +
            "use v-else-if to chain them instead."
          );
        }
      }
      if (currentParent && !element.forbidden) {
        if (element.elseif || element.else) {
          processIfConditions(element, currentParent);
        } else if (element.slotScope) { // scoped slot
          currentParent.plain = false;
          var name = element.slotTarget || '"default"';(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element;
        } else {
          currentParent.children.push(element);
          element.parent = currentParent;
        }
      }
      if (!unary) {
        currentParent = element;
        stack.push(element);
      } else {
        closeElement(element);
      }
    }

这里的操作主要是生成一个AST节点，然后处理节点的指令如：v-for,v-if,v-else-if,v-else,v-once（这些处理主要是给AST节点添加与之相关的属性值）如下：

// structural directives
  processFor(element);
  processIf(element);
  processOnce(element);

处理与v-for相关的指令

function processFor (el) {
  var exp;
  if ((exp = getAndRemoveAttr(el, 'v-for'))) {
    var res = parseFor(exp);
    if (res) {
      extend(el, res);
    } else {
      warn$2(
        ("Invalid v-for expression: " + exp)
      );
    }
  }
}

处理与v-if相关的指令

function processIf (el) {
  var exp = getAndRemoveAttr(el, 'v-if');
  if (exp) {
    el.if = exp;
    addIfCondition(el, {
      exp: exp,
      block: el
    });
  } else {
    if (getAndRemoveAttr(el, 'v-else') != null) {
      el.else = true;
    }
    var elseif = getAndRemoveAttr(el, 'v-else-if');
    if (elseif) {
      el.elseif = elseif;
    }
  }
}

处理与v-once相关的指令

function processOnce (el) {
  var once$$1 = getAndRemoveAttr(el, 'v-once');
  if (once$$1 != null) {
    el.once = true;
  }
}

，以及处理另外一些元素的特性，如key,ref、slot。
处理key特性

function processKey (el) {
  var exp = getBindingAttr(el, 'key');
  if (exp) {
    if ("development" !== 'production' && el.tag === 'template') {
      warn$2("<template> cannot be keyed. Place the key on real elements instead.");
    }
    el.key = exp;
  }
}

从这里可以看出，key不能使用在template元素上。
处理ref特性

function processRef (el) {
  var ref = getBindingAttr(el, 'ref');
  if (ref) {
    el.ref = ref;
    el.refInFor = checkInFor(el);
  }
}

处理slot元素及scope,slot-scope特性

function processSlot (el) {
  if (el.tag === 'slot') {
    el.slotName = getBindingAttr(el, 'name');
    if ("development" !== 'production' && el.key) {
      warn$2(
        "`key` does not work on <slot> because slots are abstract outlets " +
        "and can possibly expand into multiple elements. " +
        "Use the key on a wrapping element instead."
      );
    }
  } else {
    var slotScope;
    if (el.tag === 'template') {
      slotScope = getAndRemoveAttr(el, 'scope');
      /* istanbul ignore if */
      if ("development" !== 'production' && slotScope) {
        warn$2(
          "the \"scope\" attribute for scoped slots have been deprecated and " +
          "replaced by \"slot-scope\" since 2.5. The new \"slot-scope\" attribute " +
          "can also be used on plain elements in addition to <template> to " +
          "denote scoped slots.",
          true
        );
      }
      el.slotScope = slotScope || getAndRemoveAttr(el, 'slot-scope');
    } else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) {
      /* istanbul ignore if */
      if ("development" !== 'production' && el.attrsMap['v-for']) {
        warn$2(
          "Ambiguous combined usage of slot-scope and v-for on <" + (el.tag) + "> " +
          "(v-for takes higher priority). Use a wrapper <template> for the " +
          "scoped slot to make it clearer.",
          true
        );
      }
      el.slotScope = slotScope;
    }
    var slotTarget = getBindingAttr(el, 'slot');
    if (slotTarget) {
      el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget;
      // preserve slot as an attribute for native shadow DOM compat
      // only for non-scoped slots.
      if (el.tag !== 'template' && !el.slotScope) {
        addAttr(el, 'slot', slotTarget);
      }
    }
  }
}

这里限制了
:key特性不能使用在slot元素上；
在2.5以上的vue版本中，template元素上应该使用slot-scope作用域插槽；
slot-scope和v-for不能出现在同一元素上
最后获取某个元素的slot特性值（如果有的话）

处理与动态组件相关的特性

function processComponent (el) {
  var binding;
  if ((binding = getBindingAttr(el, 'is'))) {
    el.component = binding;
  }
  if (getAndRemoveAttr(el, 'inline-template') != null) {
    el.inlineTemplate = true;
  }
}

最后就是对根元素做一下限定。例如，slot,template元素不能用作根元素，v-for指令不能用于根元素。

2.1.3、执行chars回调，生成AST的文本节点

代码片段如下：

chars: function chars (text) {
      if (!currentParent) {
        {
          if (text === template) {
            warnOnce(
              'Component template requires a root element, rather than just text.'
            );
          } else if ((text = text.trim())) {
            warnOnce(
              ("text \"" + text + "\" outside root element will be ignored.")
            );
          }
        }
        return
      }
      // IE textarea placeholder bug
      /* istanbul ignore if */
      if (isIE &&
        currentParent.tag === 'textarea' &&
        currentParent.attrsMap.placeholder === text
      ) {
        return
      }      
      var children = currentParent.children;
      text = inPre || text.trim()
        ? isTextTag(currentParent) ? text : decodeHTMLCached(text)
        // only preserve whitespace if its not right after a starting tag
        : preserveWhitespace && children.length ? ' ' : '';
      if (text) {
        var res;
        if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
          children.push({
            type: 2,
            expression: res.expression,
            tokens: res.tokens,
            text: text
          });
        } else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
          children.push({
            type: 3,
            text: text
          });
        }
      }
    }

这里其实是分两种情况来处理AST文本节点，一种是带有双大括号的文本，这时得到的AST节点类型为：

{
  type: 2,
  expression: res.expression,
  tokens: res.tokens,
  text: text
}

另一种是普通 的纯文本，这里得到的AST节点类型为：

{
  type: 3,
  text: text
}

当然空的文本就不会生成相关的AST节点。

2.1.4、执行end回调，关闭AST节点

代码片段如下：

end: function end () {
  // remove trailing whitespace
   var element = stack[stack.length - 1];
   var lastNode = element.children[element.children.length - 1];
   if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
     element.children.pop();
   }
   // pop stack
   stack.length -= 1;
   currentParent = stack[stack.length - 1];
   closeElement(element);
 }

这里会逐个退栈，不断改变当前父节点的值即currentParent。

2.2、根据AST生成渲染函数

function generate (
  ast,
  options
) {
  var state = new CodegenState(options);
  var code = ast ? genElement(ast, state) : '_c("div")';
  return {
    render: ("with(this){return " + code + "}"),
    staticRenderFns: state.staticRenderFns
  }
}

generate函数会根据传入的AST节点动态生成一段函数体，执行该函数会得到一些虚拟节点最后生成虚拟DOM。

2.2.1、执行genElement函数，生成渲染函数片段

function genElement (el, state) {
  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    var code;
    if (el.component) {
      code = genComponent(el.component, el, state);
    } else {
      var data = el.plain ? undefined : genData$2(el, state);

      var children = el.inlineTemplate ? null : genChildren(el, state, true);
      code = "_c('" + (el.tag) + "'" + (data ? ("," + data) : '') + (children ? ("," + children) : '') + ")";
    }
    // module transforms
    for (var i = 0; i < state.transforms.length; i++) {
      code = state.transforms[i](el, code);
    }
    return code
  }
}

在本例中，首先会造成一个根节点即（div），该元素具有id为"box"的值，元素上没有其它指令，所以会执行以下代码片段。

var data = el.plain ? undefined : genData$2(el, state);
var children = el.inlineTemplate ? null : genChildren(el, state, true);
 code = "_c('" + (el.tag) + "'" + (data ? ("," + data) : '') + (children ? ("," + children) : '') + ")";

从这里可以看出，如果el.plain的值为false它会首先生成与元素属性相关的代码片段。然后再生成子元素。
2.2.2、生成元素属性参数（执行genData$2函数）

function genData$2 (el, state) {
  var data = '{';

  // directives first.
  // directives may mutate the el's other properties before they are generated.
  var dirs = genDirectives(el, state);
  if (dirs) { data += dirs + ','; }

  // key
  if (el.key) {
    data += "key:" + (el.key) + ",";
  }
  // ref
  if (el.ref) {
    data += "ref:" + (el.ref) + ",";
  }
  if (el.refInFor) {
    data += "refInFor:true,";
  }
  // pre
  if (el.pre) {
    data += "pre:true,";
  }
  // record original tag name for components using "is" attribute
  if (el.component) {
    data += "tag:\"" + (el.tag) + "\",";
  }
  // module data generation functions
  for (var i = 0; i < state.dataGenFns.length; i++) {
    data += state.dataGenFns[i](el);
  }
  // attributes
  if (el.attrs) {
    data += "attrs:{" + (genProps(el.attrs)) + "},";
  }
  // DOM props
  if (el.props) {
    data += "domProps:{" + (genProps(el.props)) + "},";
  }
  // event handlers
  if (el.events) {
    data += (genHandlers(el.events, false, state.warn)) + ",";
  }
  if (el.nativeEvents) {
    data += (genHandlers(el.nativeEvents, true, state.warn)) + ",";
  }
  // slot target
  // only for non-scoped slots
  if (el.slotTarget && !el.slotScope) {
    data += "slot:" + (el.slotTarget) + ",";
  }
  // scoped slots
  if (el.scopedSlots) {
    data += (genScopedSlots(el.scopedSlots, state)) + ",";
  }
  // component v-model
  if (el.model) {
    data += "model:{value:" + (el.model.value) + ",callback:" + (el.model.callback) + ",expression:" + (el.model.expression) + "},";
  }
  // inline-template
  if (el.inlineTemplate) {
    var inlineTemplate = genInlineTemplate(el, state);
    if (inlineTemplate) {
      data += inlineTemplate + ",";
    }
  }
  data = data.replace(/,$/, '') + '}';
  // v-bind data wrap
  if (el.wrapData) {
    data = el.wrapData(data);
  }
  // v-on data wrap
  if (el.wrapListeners) {
    data = el.wrapListeners(data);
  }
  return data
}

在本例中，根元素的生成只会执行下面代码

 // attributes
  if (el.attrs) {
    data += "attrs:{" + (genProps(el.attrs)) + "},";
  }

最终会得到{attrs:{"id":"box"}}的属性值。
2.2.3、生成元素子节点
接下来会执行var children = el.inlineTemplate ? null : genChildren(el, state, true);语句，由于该元素为非内联模板所以会执行genChildren(el, state, true)。

function genChildren (
  el,
  state,
  checkSkip,
  altGenElement,
  altGenNode
) {
  var children = el.children;
  if (children.length) {
    var el$1 = children[0];
    // optimize single v-for
    if (children.length === 1 &&
      el$1.for &&
      el$1.tag !== 'template' &&
      el$1.tag !== 'slot'
    ) {
      return (altGenElement || genElement)(el$1, state)
    }
    var normalizationType = checkSkip
      ? getNormalizationType(children, state.maybeComponent)
      : 0;
    var gen = altGenNode || genNode;
    return ("[" + (children.map(function (c) { return gen(c, state); }).join(',')) + "]" + (normalizationType ? ("," + normalizationType) : ''))
  }
}

这里我们的关注点主要是下面这段代码：

 var gen = altGenNode || genNode;
 return ("[" + (children.map(function (c) { return gen(c, state); }).join(',')) + "]" + (normalizationType ? ("," + normalizationType) : ''))

从这里可以看也，它会生成一个动态的数组。通过map方法遍历每个子节点，并生成与之相关的虚拟节点生成函数，即对每个子节点调用分别调用一次gen(c, state)，在这里gen函数就是genNode函数

function genNode (node, state) {
  if (node.type === 1) {
    return genElement(node, state)
  } if (node.type === 3 && node.isComment) {
    return genComment(node)
  } else {
    return genText(node)
  }
}

genNode函数会生成有三种节点类型，即普通的元素节点、注释节点、文本节点。genElement生成的元素节点其实上面已经指出，这里对于普通的元素节点，其实是通过间接递归的方式生成，还有另外两种也值得看一下。

function genText (text) {
  return ("_v(" + (text.type === 2
    ? text.expression // no need for () because already wrapped in _s()
    : transformSpecialNewlines(JSON.stringify(text.text))) + ")")
}

而文本节点这里又会分为两种，一种是普通的文本节点，另外就是具有双大括号的文本插值。文本节点生成函数为_v。例如本例中有一个普通文本“我喜欢Vue”，则会得到_v("我喜欢Vue")的结果。
至于注释节点则会执行下面函数

function genComment (comment) {
  return ("_e(" + (JSON.stringify(comment.text)) + ")")
}

这里注释节点的生成会借助_e工具函数。
最终会得到如下的渲染函数

"_c('div',{attrs:{"id":"box"}},[_v("\n\t\t\tI love vue\n\t\t\t"),_c('ul',_l((data),function(item){return _c('li',{on:{"click":function($event){logChange(item.NAME,item.AGE)}}},[_v("\n\t\t\t\t\t"+_s(item.NAME)+"--"+_s(item.AGE)+"\n\t\t\t\t")])}))])"

这里的_c函数是生成虚拟普通元素节点的函数，_v生成虚拟文本节点，_s生成将参数字符串化，这些函数都是提前定义好的(具体后面有机会再仔细研究)。

function installRenderHelpers (target) {
  target._o = markOnce;
  target._n = toNumber;
  target._s = toString;
  target._l = renderList;
  target._t = renderSlot;
  target._q = looseEqual;
  target._i = looseIndexOf;
  target._m = renderStatic;
  target._f = resolveFilter;
  target._k = checkKeyCodes;
  target._b = bindObjectProps;
  target._v = createTextVNode;
  target._e = createEmptyVNode;
  target._u = resolveScopedSlots;
  target._g = bindObjectListeners;
}

然后通过 下面的createFunction函数生成可以正常执行的渲染函数，参数code就是上面得到的关于渲染函数的字符串。

function createFunction (code, errors) {
  try {
    return new Function(code)
  } catch (err) {
    errors.push({ err: err, code: code });
    return noop
  }
}

这个阶段用一句话来讲，就是将页面的HTML模板解析出来得到AST树，再根据AST节点，动态生成渲染函数。

追梦111
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
before、after小案例
weixin_54643627的博客
01-16 256
before、after小案例 做这个小案例之前我们需要知道before和after是什么？要怎么用？看以下截图 首先在W3School里：before的定义是选择器在被选元素的内容前面插入内容。意思就是在一个元素前面添加内容，这里可以添加文字等内容，也可以在添加的内容里设置一些样式。但是一旦用到before或after这个伪元素就必须要有content这个属性在里面，因为我们添加的内容就在这个属性里面添加。after也是一样的，只是它是在元素后面添加而已。看下面代码截图。 下面是上面代码的效果。 接
Vue——简述生命周期以及每个阶段做的事
yan的秘密基地
04-06 2653
每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，它需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom。这个过程中会运行叫做生命周期钩子的函数，以便用户在特定阶段有机会添加他们自己的代码。 生命周期总共可以分为8个阶段：创建前后（beforeCreate/created），载入前后（beforeMount/mounted），更新前后（beforeUpdate/updated），销毁前后（beforeDestroy/destoryed），以及一些特殊场景的生命周期。Vue3中新增了三
Vue 3 生命周期完整指南
最新发布
2401_84434086的博客
04-29 371
/ 组合 API除了beforecate和created(它们被setup方法本身所取代)，我们可以在setup– 在挂载开始之前被调用：相关的render函数首次被调用。onMounted– 组件挂载时调用– 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。onUpdated– 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。onBeforeUnmount – 在卸载组件实例之前调用。
vue生命周期
m0_71831301的博客
12-06 129
vue生命周期介绍
vue生命周期过程
chenyinany的博客
03-26 1050
vue生命周期过程 beforeGreate(){} 表示实例完全创建出来之前会执行他 created(){} 这个阶段可以获取到data与method里面的东西了 *beforeMount(){}*模板已将在内存中编辑完成了，但是尚未来把模板渲染到页面中（也就是能获取到HTML但是获取不到data与method给它付的值） *mounted(){}*内存中的模板已经真实的挂载到了页面中，用户已经可以看得到渲染好的页面了，如果要通过某些插件操作页面上的dom节点，最早要在mounted中进行，这个执行完了就
浅谈vue生命周期共有几个阶段？分别是什么？
10-14
Vue实例在生命周期中的不同阶段，执行不同的操作，例如数据绑定、DOM操作、事件处理等。了解Vue的生命周期对于优化应用性能和编写高效的组件至关重要。 Vue实例的生命周期分为以下几个阶段： 1. **beforeCreate**...
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue3源码 vue-next源码
06-09
vue3都出来这么久了，还不学起来等啥呢？组合式api，proxy做数据响应，平台无关的虚拟dom。最新的源码，感觉download学习吧！！学不动的就算了，别勉强
Vue 技术栈 带你探究 vue-router 源码 手写vue-router
01-08
6、从源码中学习设计模式，一举两得 7、编程思想的提升及代码质量的提高 8、通过分析源码学习架构，看看优秀的框架 9、项目实战开发 10、面试准备，完善个人简历 暂时想到的就这么多，把这列举的10点做好了，我觉得...
vue中路由vue-router的使用和生命周期
01-06
vue-router Vue Router 是vue.js官方的路由管理器。它和vue.js的核心深度集成，让构建单页面应用变得易如反掌。 vue-router的使用 1.在项目src文件夹下新建名为router的文件夹 2.在router文件夹下新建index.js ...
vue 生命周期
qq_64209130的博客
05-07 1257
vue声明周期就是一个vue实例对象从创建到销毁的过程, 从创建vue , 初始化vue对象,初始化vue属性和方法 , 创建模板字符串 , 渲染页面 , 更新 , 销毁 这个过程 生命周期方法分为三大类 1.创建期间的生命周期方法 beforeCreate(创建前) created(创建后) beforeMount(挂载前) mounted(挂载后) 2.运行期间的生命周期方法 beforeUpdate(更新前) updated(更新后) 3.销毁时的生命周期方法 before.
VUE生命周期详解
魏晓栋
12-26 3439
vue生命周期可以分为八个阶段，分别是： beforeCreate(创建前) created(创建后) beforeMount(载入前) mounted(载入后) beforeUpdate(更新前) updated（更新后) beforeDestroy(销毁前)v destroyed（销毁后) 1,创建前(beforeCreate) 对应的钩子函数为beforeCreate。此...
Vue生命周期函数
TongJ_的博客
08-14 568
beforecreate：创建前 vue刚被创建时调用，此时所有变量和函数都未初始化完毕，在此函数下可以新增一些内容，跟着声明周期渲染。created：创建后，变量和函数初始化完毕，没有向页面渲染，此处可以执行ajax，让获取的变量跟着渲染。beforeMount：挂载前，此时el可以寻找到挂载点，开始渲染页面，此处也可以执行ajax。生命周期函数过程分为：创建前，创建后，挂载前，挂载后，更新前，更新后，销毁前，销毁后。父组件创建-父组件挂载-子组件创建-子组件挂载-子组件渲染-父组件渲染。......
Vue项目中props传值、data数据初始化、watch（immediate: true）和常用钩子之间先后关系
weixin_42332641的博客
01-19 837
先后顺序是： beforeCreate > props > data初始化 > watch > created > beforeMount > mounted
【Vue】 生命周期， created，mounted, methods , computed , watched
YOOSHIN的博客
04-13 691
生命周期： 用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。 beforecreate : 一般使用场景是在加 loading事件 的时候created ：处于loading结束后，还做一些初始化，实现函数自执行（data数据已经初始化，但是DOM结构渲染完成，组件没有加载）beforemount：处于组件创建完成，但未开始执行操作mounted ：处于发起...
vue基础五：钩子函数(beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroye)
白骨梦儿
11-30 2742
vm的生命周期函数1. 生命周期的定义2.钩子函数：beforeCreate、 created3.beforeMount、mounted4.beforeUpdate、updated5.beforeDestroy、destroyed 1. 生命周期的定义 <!-- 生命周期: 1.又名:生命周期回调函数、生命周期函数、生命周期钩子 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的this指
vue的一些概念02
panpan2316872469的博客
01-18 897
1.Vue中computed与method的区别 相同点: 如果作为模板的数据显示，二者能实现响应的功能，唯一不同的是methods定义的方法需要执行 不同点： 1.computed 会基于响应数据缓存，methods不会缓存； 2.diff之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的方法会执行 3.computed是属性调用，而methods是函数调用 2.虚拟DOM中key的作用 2.1用index作为key可能会引发的问题 若对数据进行：
vue3 生命周期 v-show
09-09
它在组件的生命周期中的具体作用与 Vue 2 中相同。 v-show 的原理是通过修改元素的 CSS 属性 `display` 来控制元素的显示与隐藏。当条件为 true 时，元素会被显示，当条件为 false 时，元素会被隐藏。 在组件的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值