vue2框架初始化过程解析

发布时间:2025-02-25 04:37:59 发布人:远客网络

vue2初始化做了什么

Vue2 初始化做了什么？

在Vue2的初始化过程中，主要做了以下四件事：1、初始化数据绑定，2、初始化生命周期钩子，3、初始化事件，4、初始化渲染。这些步骤确保了Vue实例能够正常工作，并且具备响应式的数据绑定能力。下面将详细介绍这四个步骤。

一、初始化数据绑定

Vue2初始化的第一个关键步骤是数据绑定的初始化。具体来说，包括以下几个方面：

观察者模式：Vue2使用观察者模式来监控数据的变化。每个属性都有一个对应的观察者对象，这个对象会在属性变化时通知视图进行更新。
数据代理：Vue实例会对data对象进行代理，这样我们可以直接通过this来访问data中的属性。例如，this.message实际上是this._data.message的一个代理。
响应式系统：Vue2使用Object.defineProperty来实现响应式系统，为每个属性设置getter和setter，从而在属性变化时自动触发视图更新。

具体实现流程如下：

// 数据代理
function proxy (target, sourceKey, key) {
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get: function proxyGetter () {
      return this[sourceKey][key]
    },
    set: function proxySetter (val) {
      this[sourceKey][key] = val
    }
  })
}
// 初始化数据
function initData (vm) {
  var data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  for (var key in data) {
    proxy(vm, `_data`, key)
  }
  observe(data, true /* asRootData */)
}

二、初始化生命周期钩子

Vue实例在创建和销毁的过程中会触发一系列的生命周期钩子函数。这些钩子函数为开发者提供了在不同阶段执行代码的机会。

beforeCreate：实例初始化之后，数据观测和事件配置之前调用。
created：实例创建完成后调用，此时实例已完成数据观测、属性和方法的运算，但尚未进行DOM渲染。
beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。
mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用。
beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
beforeDestroy：实例销毁之前调用。实例仍然完全可用。
destroyed：实例销毁后调用。调用后，Vue实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

生命周期钩子的初始化代码如下：

function callHook (vm, hook) {
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      handlers[i].call(vm)
    }
  }
}

三、初始化事件

Vue实例内部使用事件系统来处理组件间的通信和自身的事件。初始化事件包括以下几个方面：

事件监听器：为组件添加自定义事件监听器。
事件触发器：提供方法触发自定义事件。
父子组件通信：子组件通过事件向父组件发送消息，父组件通过监听这些事件来处理相应的逻辑。

事件系统的核心代码如下：

function initEvents (vm) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}
Vue.prototype.$on = function (event, fn) {
  const vm = this
  if (Array.isArray(event)) {
    for (let i = 0, l = event.length; i < l; i++) {
      vm.$on(event[i], fn)
    }
  } else {
    (vm._events[event] || (vm._events[event] = [])).push(fn)
  }
  return vm
}
Vue.prototype.$emit = function (event) {
  const vm = this
  let cbs = vm._events[event]
  if (cbs) {
    cbs = cbs.length > 1 ? toArray(cbs) : cbs
    const args = toArray(arguments, 1)
    for (let i = 0, l = cbs.length; i < l; i++) {
      cbs[i].apply(vm, args)
    }
  }
  return vm
}

四、初始化渲染

Vue实例的渲染是通过虚拟DOM实现的。在初始化渲染时，Vue会进行以下几个步骤：

创建虚拟DOM：Vue使用虚拟DOM来表示真实DOM的结构，从而提高性能和可维护性。
渲染函数：Vue实例会将模板编译成渲染函数，并在数据变化时重新调用渲染函数生成新的虚拟DOM。
DOM更新：通过对比新旧虚拟DOM的差异，Vue只更新需要变化的部分，从而提高性能。

渲染系统的核心代码如下：

function mountComponent (vm, el, hydrating) {
  vm.$el = el
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
  }
  callHook(vm, 'beforeMount')
  let updateComponent
  updateComponent = () => {
    vm._update(vm._render(), hydrating)
  }
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}