非非非標題黨，干貨預警！！！

介紹

大家好，我是清池交友 app 開發日記，記錄清池交友 app 開發中學習過程和踩坑日記，偽全棧^[1]

技術棧：前端 js，vue，uniapp，后端 java

尤大鎮貼

先奉上 2013 年尤大寫的 vue 的第一行代碼來自：

github 源碼地址鎮貼：vue 官方倉庫 0.1 分支 explorations/getset.html 文件^[2]

引讀：

• 本篇文章，用 30 行代碼實現 0.1 版本 vue，是參照尤大 2013 年，在 git 上傳的 vue 的第一行代碼(vue 的 0.1)版本代碼思路實現的，尤大僅用 40 行代碼就實現了 0.1 版本的 vue。

• 為了更方便學習和交流，我們基于尤大的代碼省略了一些內容，提取核心功能代碼，調整了代碼順序，修改了部分變量命名，增加了注釋，僅剩 30 行代碼，更加簡潔，直觀的向大家展示 vue 的核心功能實現邏輯。

• 本人也是個小菜鳥，整理本篇文章用了一天的時間，不足之處歡迎大家指正批評，文中代碼的具體實現細節存在不嚴謹的地方，請大家忽略，本文僅用來交流 vue 的實現思想，并未深究細節。

正文：

實現邏輯簡述

本文 30 行代碼實現 vue，github 倉庫地址^[3]

本篇文章中代碼僅實現了 vue 的核心功能數據綁定，未實現其他功能。

文中 html 可直接打開在瀏覽器中運行，查看效果

我們先用文字來簡單描述下核心代碼的實現邏輯

獲取 vue 根結點的 dom，替換 dom 中的{{}}模板語法，并根據模板{{msg}}中使用 data 中的屬性名稱(msg)為其打上標志，方便之后尋找哪些 dom 使用了模板語法

記錄模板語法中使用了 data 中的哪些屬性，方便在這些值變化時更新 dom

遍歷這些屬性，并根屬性名稱找到對應的 dom，移除標志(標志用來尋找 dom，此時已經獲得了 dom，所以移除標志)

攔截屬性的 set、get 方法，在 set 屬性時，更新 dom 的 textContent 實現數據變化更新視圖的功能

代碼實現

接下來看代碼如下：

//實例化vueconst app = new vue('app', {msg: '清池丨干凈的戀愛交友app'})//id: app//initData: {msg: "hello"}function vue(id, initData) { //vue中一般都包含el屬性，代表vue實例對應的dom元素 const vueDom = this.el = document.getElementById(id) //獲取 #app dom ... //vue的data屬性，尾部為data賦值 const data = this.data = {} //定義常量，用來標示需要數據綁定的dom元素使用 const bindingMark = 'bind-dom-flag' //定義臨時變量來存儲模板中使用了data中的值的列表 const dataAttrs = {} //替換#app dom中的模板內容 vueDom.innerHTML = vueDom.innerHTML.replace(/{{(.*)}}/g, (match, dataAttrName) => { //用來記錄模板中使用了data中的哪些值，本案例模板中只使用data中的msg dataAttrs[dataAttrName] = {} // {msg: {}} //給使用了模板的dom打上標志，bindingMark = data中的值msg，以便將這些dom放進 dataAttrs 中 return ' + bindingMark + '="' + dataAttrName + '">' }) //遍歷dom中使用的data屬性 for (const dataAttrName in dataAttrs) { //獲取data對應的dom列表 const doms = vueDom.querySelectorAll('[' + bindingMark + '="' + dataAttrName + '"]') //移除dom上的標志，標志用來獲取dom列表，獲取后就可以將標志刪除了 doms.forEach((e) => { e.removeAttribute(bindingMark) }) //獲取定義臨時變量中的 dataAttr 對象，defineProperty實現數據綁定需要借助這個對象來實現 const dataAttrObj = dataAttrs[dataAttrName] //劫持data屬性的set，get方法 Object.defineProperty(data, dataAttrName, { get() { //返回臨時變量dataAttr中的attr return dataAttrObj.val }, set(newVal) { //更新data中此屬性對應的所有dom，更新所有模板中使用了msg的dom doms.forEach((dom) => { dataAttrObj.val = dom.textContent = newVal }) } }) } //將外部傳入的初始化值賦值給vue實例的data屬性 for (const dataAttrName in initData) { //賦值，觸發set，更新dom this.data[dataAttrName] = initData[dataAttrName] }}

html 如下：

{{msg}}

{{msg}}

{{msg}}

結尾總結：

看完本篇文章，相信大家對 vue 的基本原理和實現方式都能有一個清晰的認識了吧，趕緊動手去擼一個 mini-vue 吧，這已經是面試中必不可少的試題了

文中不足之處歡迎大家指正批評，有需要交流的問題也歡迎大家踴躍留言。

---

清池 app 開發日記是記錄清池 app 開發中學習過程和踩坑日記，清池 app 目前有 20w+注冊用戶，3000 日活，主要用戶年齡在 16-23 之間^[4]

如果您對一款社交軟件從 0-0.1 的成長過程中遇到的趣事和技術問題感興趣，歡迎關注我們的公眾號，我們一同成長

我們的技術棧，偽全棧，前端 js，vue，uniapp，后端 java

清池 app 官網：https://www.qingchi1.com^[5]

關于和聯系我們：https://www.qingchi1.com/about^[6]

公眾號：qingchiapp，(關注公眾號獲取清池 app 項目的開源代碼，星空話緣，原諒這個名字是之前的，以后會改成清池 app 開發日記)

交友群+v：qingchizh，群內男女比例 1：5-10，女生免費，男生收費

清池app開發日記歡迎大家點擊體驗清池app小程序，干凈的戀愛交友軟件

參考資料

[1]

大家好，我是清池交友 app 開發日記，記錄清池交友 app 開發中學習過程和踩坑日記，偽全棧: https://www.qingchi1.com/about

[2]

github 源碼地址鎮貼：vue 官方倉庫 0.1 分支 explorations/getset.html 文件: https://github.com/vuejs/vue/blob/871ed9126639c9128c18bb2f19e6afd42c0c5ad9/explorations/getset.html

[3]

本文 30 行代碼實現 vue，github 倉庫地址: https://github.com/qingchiapp/30line-mini-vue/blob/master/vue01.html

[4]

清池 app 開發日記是記錄清池 app 開發中學習過程和踩坑日記，清池 app 目前有 20w+注冊用戶，3000 日活，主要用戶年齡在 16-23 之間: https://www.qingchi1.com/about

[5]

https://www.qingchi1.com: https://www.qingchi1.com

[6]

https://www.qingchi1.com/about: https://www.qingchi1.com/about

總結

以上是生活随笔為你收集整理的thymealf如何实现传单个变量给html_梦回2013，看尤大vue的第一行代码，如何用30行代码实现vue(超简洁，适合初学者)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。