非非非標(biāo)題黨，干貨預(yù)警！！！

介紹

大家好，我是清池交友 app 開發(fā)日記，記錄清池交友 app 開發(fā)中學(xué)習(xí)過程和踩坑日記，偽全棧^[1]

技術(shù)棧：前端 js，vue，uniapp，后端 java

尤大鎮(zhèn)貼

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

github 源碼地址鎮(zhèn)貼：vue 官方倉(cāng)庫(kù) 0.1 分支 explorations/getset.html 文件^[2]

引讀：

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

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

• 本人也是個(gè)小菜鳥，整理本篇文章用了一天的時(shí)間，不足之處歡迎大家指正批評(píng)，文中代碼的具體實(shí)現(xiàn)細(xì)節(jié)存在不嚴(yán)謹(jǐn)?shù)牡胤?#xff0c;請(qǐng)大家忽略，本文僅用來交流 vue 的實(shí)現(xiàn)思想，并未深究細(xì)節(jié)。

正文：

實(shí)現(xiàn)邏輯簡(jiǎn)述

本文 30 行代碼實(shí)現(xiàn) vue，github 倉(cāng)庫(kù)地址^[3]

本篇文章中代碼僅實(shí)現(xiàn)了 vue 的核心功能數(shù)據(jù)綁定，未實(shí)現(xiàn)其他功能。

文中 html 可直接打開在瀏覽器中運(yùn)行，查看效果

我們先用文字來簡(jiǎn)單描述下核心代碼的實(shí)現(xiàn)邏輯

獲取 vue 根結(jié)點(diǎn)的 dom，替換 dom 中的{{}}模板語(yǔ)法，并根據(jù)模板{{msg}}中使用 data 中的屬性名稱(msg)為其打上標(biāo)志，方便之后尋找哪些 dom 使用了模板語(yǔ)法

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

遍歷這些屬性，并根屬性名稱找到對(duì)應(yīng)的 dom，移除標(biāo)志(標(biāo)志用來尋找 dom，此時(shí)已經(jīng)獲得了 dom，所以移除標(biāo)志)

攔截屬性的 set、get 方法，在 set 屬性時(shí)，更新 dom 的 textContent 實(shí)現(xiàn)數(shù)據(jù)變化更新視圖的功能

代碼實(shí)現(xiàn)

接下來看代碼如下：

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

html 如下：

{{msg}}

{{msg}}

{{msg}}

結(jié)尾總結(jié)：

看完本篇文章，相信大家對(duì) vue 的基本原理和實(shí)現(xiàn)方式都能有一個(gè)清晰的認(rèn)識(shí)了吧，趕緊動(dòng)手去擼一個(gè) mini-vue 吧，這已經(jīng)是面試中必不可少的試題了

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

---

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

如果您對(duì)一款社交軟件從 0-0.1 的成長(zhǎng)過程中遇到的趣事和技術(shù)問題感興趣，歡迎關(guān)注我們的公眾號(hào)，我們一同成長(zhǎng)

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

清池 app 官網(wǎng)：https://www.qingchi1.com^[5]

關(guān)于和聯(lián)系我們：https://www.qingchi1.com/about^[6]

公眾號(hào)：qingchiapp，(關(guān)注公眾號(hào)獲取清池 app 項(xiàng)目的開源代碼，星空話緣，原諒這個(gè)名字是之前的，以后會(huì)改成清池 app 開發(fā)日記)

交友群+v：qingchizh，群內(nèi)男女比例 1：5-10，女生免費(fèi)，男生收費(fèi)

清池app開發(fā)日記歡迎大家點(diǎn)擊體驗(yàn)清池app小程序，干凈的戀愛交友軟件

參考資料

[1]

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

[2]

github 源碼地址鎮(zhèn)貼：vue 官方倉(cāng)庫(kù) 0.1 分支 explorations/getset.html 文件: https://github.com/vuejs/vue/blob/871ed9126639c9128c18bb2f19e6afd42c0c5ad9/explorations/getset.html

[3]

本文 30 行代碼實(shí)現(xiàn) vue，github 倉(cāng)庫(kù)地址: https://github.com/qingchiapp/30line-mini-vue/blob/master/vue01.html

[4]

清池 app 開發(fā)日記是記錄清池 app 開發(fā)中學(xué)習(xí)過程和踩坑日記，清池 app 目前有 20w+注冊(cè)用戶，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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。