Vue 第一次 commit 原來是這個樣子

2021-02-20 小生方勤




前言

周末在家休息，突然想看看 Vue 第一次的 commit 提交了什麼，想看看 Vue 最開始的樣子。查看之後發現 Vue 的第一版並沒有我想像的那麼完美，可以說有些簡陋。但這不影響 1 年多以後這個框架的流行。

查看 Vue 的第一次 commit

不知道有沒有同學是純體力的找到的第一次提交，這裡提供一個簡單的方案；

第一步：

git clone https://github.com/vuejs/vue.git

第二步：

git log--all

然後輸入一個很大的數：

回車，你就能看到第一次提交的 hash 值了：

第三步：

輸入 q 即可退出，然後：

git checkout83fac017f96f34c92c3578796a7ddb443d4e1f17

現在你的 VScode 上顯示的就是 Vue 的第一次 commit 的內容了！

vue 第一次 commit 的傳送門：https://github.com/vuejs/vue/tree/83fac017f96f34c92c3578796a7ddb443d4e1f17

發現

Vue 最初的樣子是這 66 行代碼 

你會發現第一次 commit 使用的打包工具是 grunt；

然後 checkout 到第二次 commit，就看到了雙向綁定的一個核心： Object.defineProperty()，細心的你會發現 getset.html 裡面定義的方法名是 Element（Element UI ？）；

再然後 checkout 到第三次 commit, 你會發現原來 Vue 一開始的命名是 Seed，而非 Vue；

你每一次 checkout 到下一次的 commit 的時候，你對 Vue 的認識就會多一點。

……

這像不像在從頭看一部電影，我覺得通過這種方式來學習 Vue，可能會比直接學習 vue 最後提交的樣子來的更生動。如果你是看別人對 Vue 源碼的解讀，更像是在看影評人的解讀 —— 總是會存在迷惑。

小生以為這也是一種學習源碼的方式，通過這種方式你會體會到一些看源碼的樂趣。當然這種方式花費的時間可能會更多，不過理解的也會更深刻。

長按關注小生

相關焦點

  • 跟我一起編寫Vue3版ElementUI
    這個過程應該是每天都需要做的事情5.1 添加新遠程分支這個只需要做一次git remote add upstream git@github.com:kkbjs/element3.git複製代碼5.2 拉去合併遠程分支到master分支這個需要隨時做 保持你的master分支永遠是官方最新成果。
  • Vue項目使用攔截器和JWT驗證(完整案例)
    /views/Profile.vue') }\]因為項目中需要用到樣式什麼的，這裡我引入了iView，main.js代碼：import Vue from 'vue'import App from './App.vue'import router from '.
  • 大白話理解Vuex
    當我們在項目中使用props來處理數據共享關係時，多層級的組件之間數據傳遞真的是很繁瑣，費勁且不易維護，vuex的出現，就可以完美幫我們解決這個問題。幾個關鍵欄位的含義1. vuex是什麼？Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。
  • 手把手Vue3項目(一)——安裝配置 Vite + Vue3 + TypeScript + Ant-design-vue 項目
    Git 代碼檢測 pre-commit / commit-message後續文章會繼續更新，mock、json-server模擬前端數據，實現前後端分離開發，axios安裝與配置，後臺管理系統登錄邏輯實現，VueRouter動態路由配置和權限管理，通用組件的封裝等等。
  • vueX 的使用
    vueX 文檔 https://vuex.vuejs.org/zh/installation.html正文：方法一：使用npm安裝vueX1.1 在項目根目錄下執行vue命令：npm install vuex --save，安裝vueX插件。
  • 你和大神之間,就差這個vue單元測試實例了!
    /views/procudtpay.vue'這裡關於執行順序做一點額外說明：示例中sessionParams的賦值是在import引入.vue模塊就執行了的，所以對sessionStorage的定義賦值需要在引入之前。如果你的sessionStorage取值是在vue實例化後，比如created中，那麼則沒有該問題。
  • Vue 項目 SSR 改造實戰
    下圖是我的博客以前在百度的快照：細心的朋友會發現，這個快照非常簡單，簡單到幾乎什麼都沒有。這也是沒辦法的事，博客是基於Vue的SPA頁面，整個項目本來就是一個「空架子」，這個快照從博客2月份上線以來就一直是上面的樣子，直到最近上線SSR。
  • 快速手寫自己的Vuex
    Vuex 初始化為什麼在vue實例化的時候要傳入store去實例化呢？那是為了讓vue所有的組件中可以通過 this.$store來獲取該對象，即 this.$store 指向 store 實例。$store 中，這個 options.store 就是我們在實例化 Store 對象的實例。Store 對象的構造函數接收⼀個對象參數，它包含 actions 、 getters 、 state 、 mutations 等核⼼概念，接下來我們一一實現。
  • 手寫Vuex核心原理,再也不怕面試官問我Vuex原理
    Store這個類擁有commit，dispatch這些方法，Store類裡將用戶傳入的state包裝成data，作為new Vue的參數，從而實現了state 值的響應式。二、基本準備工作我們先利用vue-cli建一個項目
  • 現代 Vue 工程之「國際化 i18n 開發」
    name: … vue-i18n-practice✔ Select a framework: › vue✔ Select a variant: › vue-ts🔗 可查看 commit: https://github.com/xiaoluoboding/vue-i18n-practice/commit/5fb5a8fd961448950e4523c122421771bb25fe1f
  • Vuex 核心概念
    Vuex核心概念state mutations  getters actions modules以下代碼為vuex store.js的簡潔使用描述了一個使用vuex在詳情頁和分類選擇頁面之間傳遞參數的模型import Vue from 'vue'import Vuex from '
  • 優化博客後臺(Vue)Javascript文件體積
    往區域裡面看，可以看到 chunk-vendors.js中主要是element-ui，其次是vue.runtime.esm.js，其餘的文件都比較小。想要減少chunk-vendors.js體積，思路有2個:使用公共CDN。最徹底的方案，把ui庫抽離出來。當然還可以「更徹底」，把vue、vuex、vue-router、axios等等依賴都剝離出去。
  • 使用 Webpack5 創建 Vue3 + TS 項目
    前言筆者兩年前曾寫過一篇文章《Webpack4 搭建 Vue 項目》，後來隨著 webpack5 和 vue3 的面世，一直想升級下我這個 createVue 項目，但是苦於沒有時間（其實是因為懶），一直拖延至今。搗鼓了好幾天，終於搭建好整個項目，因此僅以此文記錄升級搭建的過程。PS: 其實也可以用官方腳手架搭建的，為何要自己從頭做起呢？
  • Vue SSR入門實戰
    });}export default function createStore() { return new Vuex.Store({ state: { bar: '', }, actions: { fetchBar({commit
  • 利用Vue 腳手架 開發chrome 插件,太方便了!
    文件，manifest.json 下的屬性content_scripts 指定inject的腳本列表 js，css    【 injected】browser_action 中 default_popup指定popup彈出的html文件路徑 【popup】background     後臺常駐頁面 【background】用戶通過 popup
  • 從0到1使用VUE-CLI3開發實戰(五):模塊化VUEX及使用vuetify
    span>課程</span>        <v-icon>music_video</v-icon>      </v-btn>    </v-bottom-nav>  </v-card></template>這裡主要用到的是v-bottom-nav這個
  • Vue 2.0 構建單頁應用最佳實戰
    但我們並不只是為了這個而使用webpack，我們需要用webpack去編譯.vue文件，如果沒有使用一個loader去轉換我們.vue文件裡的style、js和html，那麼瀏覽器就無法識別。2.模塊熱加載是webpack的一個非常碉堡的特性，將會為我們的單頁應用帶來極大的便利。通常來說，當我們修改了代碼刷新頁面，那應用裡的所有狀態就都沒有了。
  • Vuex 映射完全指南
    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    data: "test data"  }})
  • 一個niubility的Vue遊戲,真厲害!
    支持 jsx,在這個項目中matrix 組件 的功能邏輯較複雜,使用 template 模版來渲染組件已經不合適了, React 每次 setState 會觸發 'render' 方法,所以我們可以在 methods自定義 'render' 方法再在 state 變化後手動觸發 'render' 方法,但是這個方法對有複雜邏輯的組件來說會變得很繁瑣,我的解決方法是通過 Vue 的 jsx 轉換插件
  • 手摸手Electron + Vue實戰教程(一)
    2 項目搭建網上有個比較火的腳手架electron-vue，github 上 12.2k 的 star，大家應該都聽說過或者使用過，但現在我們不使用它，electron-vue是vue-cli2.0的版本，現在都已經出道 4.0 了，再者electron-vue已經很久沒有更新，我們可以使用 vue 最新的腳手架加上插件vue-cli-plugin-electron-builder