vue2.x源码剖析之初始化

最新推荐文章于 2022-12-25 22:09:25 发布

理想的后花园

最新推荐文章于 2022-12-25 22:09:25 发布

阅读量423

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46335862/article/details/121641277

版权

前言

一般初学者学框架的时候都会选择vue框架，因为vue框架的上手速度比较快，而且vue的语法和小程序的语法很像，而且学习vue后学习uniapp的成本会小很多，当然或许也有可能因为尤雨溪是中国人，其实我当初学vue，就是尤雨溪是中国人，非常崇拜尤大,哈哈，Vue框架在面试的时候也会被经常问到，就像有人说的那样，学不好vue框架，都不好意思说自己是前端。然后只会基本api是不够的，究其原理，还是要去看源码。本篇主要讲述vue2.x源码的初始化流程。

测试代码

本篇的vue2.x的源码解析基于此demo

<!DOCTYPE html>
<html>

<head>
    <title>Vue源码剖析</title>
    <script src="../../dist/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1>初始化流程</h1>
        <p>{{foo}}</p>
    </div>
    <script>
        const app = new Vue({
            el: '#demo',
            data:{foo:'奥利给'}
        })

        console.log(app.$options.render);

    </script>
</body>
</html

正文

打断点，进入代码；
在这里插入图片描述

执行构造函数，因为不是生产模式，直接执行this._init(options)

实现_init初始化方法，从这一步开始正式开始执行初始化

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)
    }

    // a flag to avoid this being observed
    vm._isVue = true

    // merge 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 {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm) // $parent/$root/...
    initEvents(vm) 
    initRender(vm) // $slots/$createElement
    callHook(vm, 'beforeCreate') 
    initInjections(vm) // resolve injections before data/props
    initState(vm) // props/methods/data/computed/watch
    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)
    }
  }
}

用原型链实现_init初始化方法
在这里插入图片描述
执行合并选型

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 {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }

进入初始化核心逻辑，这里面包括我们熟悉的自定义监听事件，生命周期，选项式里面的props、methods、data、computed、watch等,从这里面你可以看出是先执行render的

    vm._self = vm
    initLifecycle(vm) // $parent/$root/...
    initEvents(vm) 
    initRender(vm) // $slots/$createElement
    callHook(vm, 'beforeCreate') 
    initInjections(vm) // resolve injections before data/props
    initState(vm) // props/methods/data/computed/watch
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

因为我这里面设置了el,所以接下来调用mount

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

执行扩展$mount
在这里插入图片描述
获取选项，并且查找render选项

  const options = this.$options
  if (!options.render) {
let template = options.template

获取template选项，这里面没有template，所以不执行下面这段代码，看到这里，我想起当初面试千寻的时候面试官问我模板语法是如何解析的，当时候没看过源码，gg了，其实template解析之后对应的就是react里面的render，react的jsx的出现就是嫌虚拟dom太麻烦；

  if (!options.render) {
    // 获取template选项
    let template = options.template
    if (template) {
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        template = template.innerHTML
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
}

接下来执行创建模板
在这里插入图片描述
获取到html模板字符串之后，执行编译过程，把template为render函数；

最后执行挂载, 就结束了，梳理一下，在$mount里面主要步骤是先找render,然后解析templat，最后挂载el。

return mount.call(this, el, hydrating)；

在这里插入图片描述

结尾

这个也算是自己的处子作吧，后期还会写vue3.x的初始化过程，以及vue2.x和3.x的生命周期源码。才疏学浅，如果有不恰当的地方，还请多多指教。关注我，你在学习编程路上就多了一个朋友，哈哈哈。

理想的后花园

关注

10
点赞
踩
0

收藏

觉得还不错? 一键收藏
7
评论
vue2.x源码剖析之初始化

前言一般初学者学框架的时候都会选择vue框架，因为vue框架的上手速度比较快，而且vue的语法和小程序的语法很像，而且学习vue后学习uniapp的成本会小很多，当然或许也有可能因为尤雨溪是中国人，其实我当初学vue，就是尤雨溪是中国人，非常崇拜尤大,哈哈，Vue框架在面试的时候也会被经常问到，就像有人说的那样，学不好vue框架，都不好意思说自己是前端。然后只会基本api是不够的，究其原理，还是要去看源码。本篇主要讲述vue2.x源码的初始化流程。测试代码本篇的vue2.x的源码解析基于此demo&
复制链接

扫一扫