开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

写完两篇文章后，发现确实了解到了许多以前迷惑的地方，比如watch 怎么确定写法形式的，Dep是怎么收集的等等,平常面试经历的还是少，趁着这次多发现一些！！

这篇文章主要记一下生命周期下半部分的执行细节：

回顾

涉及的前端小知识【遇到就记录一下】

Object.create(null)

为什么vue中使用Object.create()

 主要就是为了防止Object构造函数的原型被修改时对详见的对象产生影响
 因为使用Object.create(null)是干净的，是没有原型的

Object.getPrototypeOf(object)

概念：返回指定对象的原型（内部[[prototype]]属性的值）

创建对象的方式及区别

const obj = {}	打印结果
const obj = {}	创建
console.log('打印obj', obj)
console.log('打印一下obj属性', Object.getPrototypeOf(obj))
console.log(Object.getPrototypeOf(obj) === Object.prototype)	true

const obj = Object.create(null)	打印结果
const obj = Object.create(null)	创建
console.log('打印obj', obj)
console.log('打印一下obj属性', Object.getPrototypeOf(obj))
console.log(Object.getPrototypeOf(obj) === Object.prototype)	false
const.log(obj.proto)	undefined

总结

从上表格得知，两种创建对象的方式，他们的原型对象是不一样的。

Object.create(null)方法创建出来的对象是干净的

若：

const obj = new Object()

Object.create(obj) //

继续生命周期

上一篇文章，自己勾勒了一个created前的一个执行过程及一部分的相关的主要的方法函数

这一部分继续画图：（潦草图，见谅）

在beforeMount、mounted过程中有些重要的过程，单独提出来写上一写：

getOuterHTML(src/platforms/web/entry-runtime-with-compiler.js)

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
...
  const options = this.$options
  if (!options.render) {
    let template = options.template
    if (template) {
    ...
    } else if (el) {
      template = getOuterHTML(el)
    }
...
  return mount.call(this, el, hydrating)
}

function getOuterHTML (el: Element): string {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    const container = document.createElement('div')
    container.appendChild(el.cloneNode(true))
    return container.innerHTML
  }
}

这个位置有一个基础知识点：outerHTML，相对应的有一个innerHTML,现在记录一下两者的区别

innerHtml 从对象的起始位置到终止位置的全部内容，不包括Html标签

outerHtml 从对象的起始位置到终止位置的全部内容，包括Html标签

compileToFunctions(src/compiler/index.js)

主要是做模板编译的操作(模板代码)

<div id="app">
  {{ message }}
  <br>
  <!--  这一段静态节点-->
  {{n}}
  <button @click="()=>{this.n++}">点击+1</button>
</div>

parse:会用正则等方式解析template模板中的指令、class、style等数据，形成AST

optimize:标记static静态节点（markStatic()，markStaticRoots()）,这里是VUE编译过程得一个优化，在diff算法中，直接跳过静态节点，减少比较的过程，优化了patch的性能

generate：是将AST树转化成render function字符串的过程，得到结果是render字符串以及statucRenderFns字符串【此方法中存在一个genElement方法，内部分别去处理vue中指令：v-for...】

后记

本文仅作为自己一个阅读记录，具体还是要看大佬们的文章下一篇：我的源码学习之路（三）---vue-2.6.14

我的源码学习之路（二）---vue-2.6.14

前言

回顾