Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue1.0源码解析一:前言 #4

Open
lihongxun945 opened this issue Jul 15, 2018 · 1 comment
Open

vue1.0源码解析一:前言 #4

lihongxun945 opened this issue Jul 15, 2018 · 1 comment

Comments

@lihongxun945
Copy link
Owner

lihongxun945 commented Jul 15, 2018

目的

此博客最早发布在我的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 lihongxun945 changed the title 八小时实现迷你版vuejs: 一前言 vue1.0源码解析: 一, 前言 Jul 15, 2018
@lihongxun945 lihongxun945 changed the title vue1.0源码解析: 一, 前言 vue1.0源码解析一:前言 Jul 15, 2018
@lihongxun945
Copy link
Owner Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant