细读 Vue.js 2.6.14 Core 源码：_init 的重要性

前端

2023-09-30 23:59:02

深入剖析 Vue.js 2.6.14 核心源码：_init 方法

在 Vue.js 的世界中，_init 方法扮演着至关重要的角色。它负责初始化组件实例，为后续生命周期钩子的执行奠定基础。让我们踏上探索之旅，揭开 _init 方法的内部机制，深入了解其在 Vue.js 框架中的作用。

_init 方法概述

_init 方法是 Vue 实例生命周期钩子函数之一，在组件实例化过程中被调用。其使命是初始化组件的属性和方法，为其在 Vue 生态系统中平稳运行做好准备。

_init 方法中的关键步骤

在组件初始化过程中，_init 方法主要执行以下几个关键步骤：

初始化生命周期钩子： 调用 initLifecycle 方法，为组件实例注册所有生命周期钩子函数，例如 beforeCreate 和 created。
初始化事件系统： 调用 initEvents 方法，为组件实例创建事件系统，使其能够与其他组件进行通信。
初始化渲染函数： 调用 initRender 方法，编译组件模板并生成渲染函数，将组件状态渲染到 DOM 中。
调用钩子函数： 调用 callHook 方法，执行 created 生命周期钩子函数，这是组件实例化过程中执行的第一个生命周期钩子。

关键步骤的深入解析

初始化生命周期钩子

initLifecycle (vm) {
  const hooks = vm.$options.lifecycleHooks
  if (hooks.length) {
    vm._hasHookEvent = true
    vm._hookQueue = []
    hooks.forEach(hook => {
      registerRef(vm, hook, vm[hook])
    })
  }
}

initLifecycle 方法遍历组件选项中的生命周期钩子函数，并将它们注册到组件实例上。它还设置 _hasHookEvent 标志，表明组件至少有一个生命周期钩子函数，并初始化 _hookQueue 数组，用于存储钩子函数调用的队列。

初始化事件系统

initEvents (vm) {
  const events = vm.$options.events
  if (events) {
    vm._events = Object.create(null)
    vm._hasHookEvent = true
    callHook(vm, 'initEvents')
  }
}

initEvents 方法初始化组件实例的事件系统，创建 _events 对象来存储事件监听器。它还设置 _hasHookEvent 标志，表明组件至少有一个事件监听器，并调用 initEvents 生命周期钩子函数。

初始化渲染函数

initRender (vm) {
  vm._vnode = null // render function bindings
  const options = vm.$options
  const parentVnode = vm.$parent && vm.$parent._vnode

  vm._renderProxy = options.render && options.renderProxy
  vm._renderContext = options.renderContext
  vm._scopeId = scopeId

  if (options.render) {
    vm._render = createFunction(options.render, vm._renderProxy)
  }

  if (options.template) {
    if (options.el) {
      vm._el = getElement(options.el)
    }
    vm._template = parseTemplate(options.template, parentVnode && parentVnode.ns, options. delimiters)
  } else if (options.el) {
    vm._el = getElement(options.el)
  }

  if (vm._el) {
    if (parentVnode) {
      vm._scopeId = resolveScopeId(parentVnode.context)
      vm._updateScopeId()
    }
  }
}

initRender 方法编译组件模板并生成渲染函数。它首先检查组件选项中是否定义了 render 函数，如果有，则使用 createFunction 方法将其转换为一个可调用的函数。如果组件选项中定义了模板，则解析该模板并将其存储在 _template 属性中。如果组件选项中定义了 el 属性，则获取该元素并将其存储在 _el 属性中。该方法还负责设置 _scopeId 和 _updateScopeId，以便在需要时应用范围样式。

调用钩子函数

callHook (vm, hook, args) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const prev = vm._watcher
  vm._watcher = null
  try {
    const hookResult = vm[hook].apply(vm, args)
    // #7573 disable dep collection when invoking lifecycle hooks
    popTarget()
    return hookResult
  } catch (err) {
    handleException(err, vm, hook)
  } finally {
    vm._watcher = prev
  }
}