preface

At home for the weekend, I suddenly wanted to see what Vue’s first commit was, and wanted to see what Vue looked like from the very beginning. The first version of Vue wasn’t as perfect as I expected, and it was a little rough and ready. But that didn’t affect the popularity of the framework more than a year later.

View the first COMMIT of the Vue

Do not know if any students are pure physical strength to find the first time to submit, here provides a simple program;

The first step:

git clone https://github.com/vuejs/vue.git
Copy the code

The second step:

git log --all
Copy the code

Then enter a large number:

Press Enter to see the hash value submitted for the first time:

Step 3:

Type Q to exit, and then:

git checkout 83fac017f96f34c92c3578796a7ddb443d4e1f17
Copy the code

Your VScode should now display the contents of the Vue’s first commit!

Vue first commit portal

found

  • You will notice that the packaging tool used for the first commit is Grunt;
  • Then checkout to the second commit, you see the core of bidirectional binding:Object.defineProperty()Careful you will findgetset.htmlThe method name defined inside isElement(Element UI?) ;
  • When you checkout to the third commit, you will notice that the Vue was originally named Seed, not Vue.
  • Every time you checkout to the next commit, you learn a little bit more about Vue.
  • …

It’s not like watching a movie from the beginning, but I think learning Vue this way is probably more vivid than learning the final version of Vue. If you look at other people’s interpretations of Vue’s source code, it’s more like reading a film critic’s interpretation — there’s always confusion.

I think this is also a way to learn the source code, through this way you will experience some of the fun of reading the source code. Of course, it may take more time, but you will understand more deeply.

Recommended reading

  • Talk about how to improve yourself when working overtime seriously
  • Some suggestions for the front-end learning path (including classic self-test questions)
  • Interesting big factory algorithm interview question
  • Learn the necessary knowledge of Vue source
  • What caching is involved from entering the URL to rendering (very detailed)

You can follow my public account of the same name [Xiaosheng Fangqin], where I will share high-quality articles and we will make progress together.