下班了，来读一读vue源码吧（一）

玖柒的小窝

修改于 2021-10-20 10:17:06

3840

修改于 2021-10-20 10:17:06

文章被收录于专栏：各类技术文章~

楔子

下班将至，作为一条咸鱼，一条还算有一小点梦想的咸鱼，开始了偷偷的读源码计划，是的，你没听错，就是要开始读源码了，作为 vue 的忠实粉丝，想来想去感觉不读下尤大大的 vue 源码总觉得有点不尊重人家呀，于是，上手读源码 ing。

扬帆・启航

首先我们来看下，截至发帖之时，vue 项目在 github 的状况如下

是的，189k 的 start，可谓是 super star 了，当然，是骡子是马，拉出来溜溜，话糙理不糙，我们这就将 vue 项目跑起来。这里讲下本人跑了些许不能算太多 vue 项目总结出来的经验，不要直接 npm install，什么，为什么我不早说，你已经安装到一半了。那只能祝你好运了😂。

这里我们有一种更好的安装 node 包的方式，本人测试，基本都可以装上，就是首先下载 git 命令行工具。然后在这里面运行

npm i --registry=https://registry.npm.taobao.org
复制代码

这样，我们就避开了两个坑一、有些 vue 项目需要使用 git 命令下载一些文件，没有 git 命令行工具会报错。二、针对 npm 下载速度慢的问题，最直接的当然是使用 cnpm 安装了，但是 cnpm 有个问题，不会走 package-lock.json 文件，所以有些时候我们好不容易锁定的各个包版本，就会因为这个老是报错。用 --registry 的方式，设置 taobao 镜像的代理，就可以很好的避开这个坑。

不好意思，源码我还是看到了

说到源码，可能大家想到的都是压缩过的代码，一堆乱码，看起来毫无头绪，甚至有种望洋兴叹的感觉了，太难了，学不动了。

但是，须知做学问必须要会坐冷板凳，当冷板凳坐热的那天，也就是成功的那天，话不多说，直接开看：

首先，我们要新建一个这样的html文件，里面的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 源码解读</title>
</head>
<body>
  <div id="app">
    {{ msg }}
  </div>
  <script src="../dist/vue.js"></script>
  <script>
    debugger
    new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      }
    })
  </script>
</body>
</html>
复制代码

细心的，想必已经发现了吧，代码中有一个debugger，这个debugger不是要调试我们的代码，我们的代码就一行new Vue()，也没必要调试，我们打开控制台，刷新页面，执行到new Vue()时，我们按f11进入函数内部，就算已经很熟悉vue的用法了，但是相信进到函数里面还是会发现，还是太小看vue了。

第一步，我们来到了Vue这个大工厂的总车间

我们假设vue是一辆高性能跑车，类似兰博基尼，法拉利这种，vue整个工厂(框架)其实要完成的最终目标就是让我们能够使用这辆车——Vue这个构造函数，而且用的时候只要简单添加几个属性，类似el,data,methods之类的，就可以让车跑起来，而且速度还很快。

带着这样的假设，我们来看这个总的大车间，可以看到，这个大车间一共6条传送带，分别运来了6个车床，用来加工产生Vue。但是，如果你自信看，真正用来加工Vue的其实只有5个，因为有一个是给Vue内部报警用的，就好像我们生产了Vue这辆高性能跑车，但是有人却要拿它去飞行，这当然是不被允许的，至少这不是我们设计的初衷，为了防止有些人真的这么做，我们不得不做出提醒，告诉他别这么做，Vue只是路面上的交通工具，不可以飞行。

为了让这个提醒更明显，我们特意从一个生产线运了这个报警器过来，声音很大，报警效果很不错，就这样，Vue这两跑车首先就被安进了一个报警装置。

接下来就是发动机了，发动机作为汽车的动力，必不可少，仔细看，Vue的发动机其实就是这个this._init()，可以把我们给他加的油和下达的指令，进行处理的一个核心部件。

这样，Vue就已经初具规模了，当然，这个里我们想象的高性能跑车还很远，不过也不必担心，因为我们还有运过来的5个车床放着没用呢，而真正的Vue高性能跑车，也只有在经过这5个车床的打磨后，才得以展示在我们眼前......(未完待续)

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js