浅析Vue源码（二）—— initMixin(上)

最新推荐文章于 2024-07-02 16:51:32 发布

DIVI_ZHANG

最新推荐文章于 2024-07-02 16:51:32 发布

阅读量1.3k

点赞数 1

分类专栏： javascript vue 文章标签： vue 源码解析前端 JavaScript

本文链接：https://blog.csdn.net/qq_36091581/article/details/82935137

版权

本文详细解析Vue源码中的initMixin，重点讲解_init方法及mergeOptions函数。mergeOptions将resolveConstructorOptions与传入的options合并，resolveConstructorOptions处理Ctor类的属性。此外，介绍了renderProxy的用途，它为render过程准备，确保在render中的this指向正确。文章适合对Vue源码感兴趣或希望深入理解Vue工作原理的读者。

摘要由CSDN通过智能技术生成

在上一篇文章《浅析Vue源码（一）-- 造物创世》中提到在定义了一个 Vue Class的时候会引入initMixin 来初始化一些功能，这篇文章就来讲讲initMixin到底初始化了哪些原理呢？

initMixin来源init.js

let uid = 0

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }
    // 如果是Vue的实例，则不需要被observe
    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    // 第一步： options参数的处理
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      // mergeOptions接下来我们会详细讲哦~
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    // 第二步： renderProxy
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    // 第三步： vm的生命周期相关变量初始化
    initLifecycle(vm)
    
    // 第四步： vm的事件监听初始化
    initEvents(vm)
    // 第五步： vm的编译render初始化
    initRende