Vue生命周期源码解读（大厂面试必备）

Posted 2021-08-31 hugo233

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue生命周期源码解读（大厂面试必备）相关的知识，希望对你有一定的参考价值。

什么是生命周期？

Vue的实例具有生命周期，Vue的实例在生成的时候，会经历一系列的初始化的过程；数据的监听，编译模板，实例挂载DOM元素，或者数据更新导致DOM更新，在执行的过程中，会运行一些叫做生命周期的钩子函数，在Vue实例生命周期中特定的时间点执行的函数称为生命周期的钩子函数；

如果我们需要在某个生命周期处理一些事情，我们可以把这些事情写在钩子函数中；等到Vue的实例生命周期到这个阶段就会执行这个钩子，而我们要做的事情也就得以处理了；

生命周期的钩子函数不能人为的控制其执行的顺序。

Vue生命周期梳理

总的来说，Vue的生命周期可以分为以下八个阶段：

beforeCreate 实例创建前
created 实例创建完成
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新完成
beforeDestory 销毁前
destoryed 销毁完成

大家可以参考一下官方资料 vue.js

1. vue实例化过程

从vue实例化开始分析，我们通过new Vue来实例化来查看一下源码在 src/core/instance/init.js 中定义使用vscode的小伙伴推荐使用Search node_modules插件查找node_modules中的插件方便多了，妈妈再也不用担心我迷路了

Vue.prototype._init = function (options?: Object) {
  // ... 省略代码
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')

  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    vm._name = formatComponentName(vm, false)
    mark(endTag)
    measure(`vue ${vm._name} init`, startTag, endTag)
  }

  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等，vue 把不同的功能逻辑拆成一些单独的函数执行。

我们关注到，在这个过程中插入钩子函数，提供给开发者调用的机会。在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM。

2.生命周期钩子

生命周期钩子自动绑定this到实例上，因此你可以通过this.操作访问到数据和方法。注意不能使用箭头函数例如下方代码，因为箭头函数绑定外层的this会一直往上找。

created:()=>{// ...代码}

下面用在各个生命周期中打印下el，data，dom节点

export default {
  name: 'App',
  data() {
    return {
      title: '标题'
    }
  },
   methods: {
    onDestoryClick() {
      this.$destroy()
    }
  },
  beforeCreate() {
    console.log(
      `\\n\\nbeforeCreate打头\\n$el    :${this.$el}\\n$data     :${JSON.stringify(
        this.$data
      )}\\n$refs.head   :${JSON.stringify(
        this.$refs.head
      )}\\nbeforeCreate结尾\\n\\n`
    )
    console.log(this.$vnode)
  },
  created() {
    console.log(
      `\\n\\ncreated打头\\n$el    :${this.$el}\\n$data     :${JSON.stringify(
        this.$data
      )}\\n$refs.head   :${JSON.stringify(this.$refs.head)}\\ncreated结尾\\n\\n`
    )
    console.log(this.$vnode)
  },
  beforeMount() {
    console.log(
      `\\n\\nbeforeMount打头\\n$el    :${this.$el}\\n$data     :${JSON.stringify(
        this.$data
      )}\\n$refs.head   :${JSON.stringify(this.$refs.head)}\\nbeforeMount结尾\\n\\n`
    )
    console.log(this.$vnode)
  },
  mounted() {
    console.log(
      `\\n\\nmounted打头\\n$el    :${this.$el}\\n$data     :${JSON.stringify(
        this.$data
      )}\\n$refs.head   :${JSON.stringify(this.$refs.head)}\\nmounted结尾\\n\\n`
    )
    console.log(this.$vnode)
  }
}

可以发现

beforeCreate中拿不到任何数据，它在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created中已经可以拿到data中的数据了，但是dom还没有挂载。会判断有无el，如果没有el则停止后面的模板挂载。

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。

使用场景:ajax请求和页面初始化
beforeMount 和 created 拿到的数据相同在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted中el被创建dom已经更新，vue实例对象中有template参数选项，则将其作为模板编译成render函数，编译优先级render函数选项 > template选项

使用场景:常用于获取VNode信息和操作，ajax请求

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted
由于beforeUpdate和updated使用的比较少，一般用计算属性和watch代替所以在此不在说明
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。