lihongxun945/myblog

vue1.0源码解析一：前言

Opened this issue · 1 comments

lihongxun945 commented

目的

此博客最早发布在我的CSDN上：言川的博客，因为最近把博客搬到了github，所以把这个系列文章整理了一下放在这里。此博客完成于 2017 年，本来名字叫 八小时实现迷你版Vuejs，现在改成 vue1.0源码解析，因为接下来我会完成一个新的系列叫 vue2.0源码解析。

顾名思义，本文的目的是为了理解 vue@1.0 的源码。为了避免读源码的枯燥，以及减少源码中大部分细节处理对阅读的影响，我自己实现了一个 tiny-vue，主要实现了vue中最核心的两个部分：

  • 响应式数据绑定
  • 指令框架

因此，这篇文章我会一边讲vue的原理，一边带大家实现一个自己的 tiny-vue。大家不用担心，tiny-vue 的实现完全是仿照 vue1.0 源码来的，甚至很多方法名都是一样的。但除了 dep.js 之外的代码完全都是我自己重写的。

tiny-vue 的源码我放在了github上这个仓库： tiny-vue

---以下是正文---

最近断断续续在看Vuejs源码，版本是 V1.0，因为最开始看的时候vue还没出v2正式版 =。=

作者的代码功力很深厚，整个代码看起来非常优雅，对模块的组织和依赖的处理非常值得学习。在看的过程中觉得自己实现一个迷你版的vue应该不难，最近三天抽出时间一些时间就实现了一个，但实际上全部时间加起来大概就一整天。

代码地址：https://github.com/lihongxun945/tiny-vue

虽然是mini版，但是实现的功能并当然不是一篇博客能说清楚的，这里打算分六篇来详细讲解实现的过程。对于比较资深的工程师，完全可以直接看我的源码，如果有不理解的再回头看博客。对于新手，建议跟着博客一步步来。

tinyvue 虽然是绝大部分代码是完全重新写的，但是无论是文件、模块还是命名等都和原版的几乎一样，而代码量却减少了90%以上，看懂tinyvue之后再去看vue原版代码会很容易上手。

动手造轮子要比光看的理解会深入的多。

要实现的功能

我们希望最终实现的效果是这样的：

<div id="a">
     <input v-model="message" />
     <button v-on:click="increase">Increase</button>
     <p v-text="message"></p>
</div>
<script>
     new Vue({
          el: "#a",
          data: {
               message: 1
          },
          methods: {
               increase () {
                    this.message += 1
               }
          }
     })
</script>

明确一下我们要实现的功能，这也是vuejs最核心的两个功能：

  1. 双向数据绑定，或者叫数据响应化
  2. 指令的支持，以及常用的 v-on, v-model, v-text 等内建的指令

具体点来说，双向数据绑定其实需要实现如下几部分：

  1. state
  2. observer

directive会复杂些，需要实现如下几个类：

  1. Directive
  2. Compile
  3. Dep
  4. Watcher
  5. v-text, v-on, v-model 等几个内置的directive

后面几篇会从从如下几个方面来详细讲解：

  • vuejs 架构

  • 实现数据响应化

  • 实现Directive

  • 实现Watcher 和 Dep

  • 实现几个内置的directive

lihongxun945 commented

如果大家有任何不懂的地方，或者有任何觉得我说的不清楚的地方，欢迎留言交流