前言

这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情” 一般初学者学框架的时候都会选择vue框架，因为vue框架的上手速度比较快，而且vue的语法和小程序的语法很像，而且学习vue后学习uniapp的成本会小很多，Vue框架在面试的时候也会被经常问到，就像有人说的那样，学不好vue框架，都不好意思说自己是前端。然后只会基本api是不够的，究其原理，还是要去看源码。本篇主要讲述vue2.x源码的初始化流程。

测试代码

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

正文

打断点，进入代码；执行构造函数，因为不是生产模式，直接执行this._init(options)方法

从这一步开始正式开始执行初始化

执行合并选型

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

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

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

执行扩展$mount

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

  if (!options.render) {
    // 获取template选项
    let template = options.template

接下来执行创建模板

获取到html模板字符串之后，执行编译过程，把template为render函数；

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

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

结尾

vue2的文章只会写这一篇了，后期还会把主要精力放在vue3的文章上面。