?昨天寫了關(guān)于 react 如何j將 jsx 渲染到界面，今天朋友讓我來談?wù)?vue，個(gè)人對(duì)于 vue 研究還是最近的事。說到 angular、react 和 vue 這三個(gè)前端主流框架，最先先接觸的是 Angular ，隨后是 react ，vue 是這兩年市場對(duì) vue 需求增加，所以也不得不看一看 vue 這個(gè)以輕巧而流行的前端框架。最近聽了 Evan 關(guān)于 vue3 介紹，vue3 還是很吸引人，一堆提高性能的優(yōu)化。

現(xiàn)在項(xiàng)目都是一再提速，只看效果的開發(fā)，這樣讓我們少了很多思考時(shí)間，我們的確做到了快速開發(fā)，但是背后卻慢慢忘記如何去思考。

vue 也是一個(gè) MVVM 框架的實(shí)現(xiàn)，兩件事可能是我們比較感性取

• vue 是如何實(shí)現(xiàn)界面隨數(shù)據(jù)變化而變化，也就是所謂數(shù)據(jù)綁定
• vue 是如何把自定義組件、組件或模板渲染到界面上
• 以及在 vue 如何實(shí)現(xiàn)組件化

部分內(nèi)容參考了 evan 給出教程。

我們今天在動(dòng)手寫 vue 之前也對(duì) vue 內(nèi)部是如何實(shí)現(xiàn)以上兩件事

Object

• obj 參數(shù)我們要操作的對(duì)象
• 'foo' 為 obj 定義屬性
• 為 foo 屬性定義一些描述性的屬性

調(diào)用 Object 的 defineProperty 方法來為對(duì)象 obj 定義屬性 foo，這里 foo 可以是 obj 已有屬性或者為未定義屬性。如果 foo 屬性還不存在就為 obj 創(chuàng)建一個(gè) foo 屬性。

有關(guān)描述該屬性的一些配置例如 enumerable、configurable 的默認(rèn)值都是 false。

const

如果 enumerable: false 時(shí)，通過 for(prop in obj)遍歷 obj 對(duì)象屬性時(shí)是看不到 foo，只有設(shè)置為true 才可以看到。

configurable

當(dāng)設(shè)置 configurable ，就無法使用 delete 來刪除屬性，false 表示不可重新定義，默認(rèn)值為 true。

const

接下來主要介紹 getter 和 setter 這兩個(gè)方法，當(dāng)我們執(zhí)行`obj.foo`就會(huì)調(diào)用 getter 方法，而為屬性賦值時(shí)則會(huì)調(diào)用 setter 方法。我們可以通過 get 和 set 方法來改變以上行為。

Object

我們可修改點(diǎn)獲取 obj.foo 獲取值行為，這樣我們每次 obj.foo 得到值 bar

Object

const

依賴最終

• 創(chuàng)建 Dep 類提供兩個(gè)方法 depend 和 notify
• 創(chuàng)建 autorun 方法接收更新函數(shù)作為參數(shù)
• 在更新函數(shù)中，顯示通過調(diào)用 Dep 實(shí)例的 dep.denpend()
• 隨后我們來調(diào)用 dep.notify 來觸發(fā)更新函數(shù)

看了這些 Evan 給出提示，我們不難看出這就是一個(gè)典型的觀測者模式，調(diào)用 dep.denpend() 等于 update 函數(shù)進(jìn)行注冊(cè)，然后通過 `dep.notify()`發(fā)送廣播同時(shí)注冊(cè)了更新函數(shù)進(jìn)行更新。那么 `autorun`有做了什么呢，`autorun`就是負(fù)責(zé)管理依賴，就是控制那些更新函數(shù)對(duì)那些依賴(事件)感興趣。

window

在 js 中是單線程，每一個(gè)時(shí)刻都只有一個(gè)函數(shù)會(huì)被執(zhí)行，當(dāng)然還有 event loop，這個(gè)東西有時(shí)間我們細(xì)細(xì)聊一聊，有趣而且強(qiáng)大東西。

let

在 js 中函數(shù)是一等 citizen 可以賦值給變量，可以作為參數(shù)甚至可以作為返回值使用。update 就是函數(shù)，其實(shí)我們要做就是裝飾者模式，給我們 update方法通過包裹，來實(shí)現(xiàn)在其中執(zhí)行一些出 update 函數(shù)體外額外操作，也可以理解注入一些 code 到方法 update 中。

function

看看起來有點(diǎn) confusing，Evan 厲害地方就是一些我們理解起來都困難小技巧，他能夠想到做出來，其實(shí)平時(shí)我們需要熟悉一些設(shè)計(jì)模式，這些設(shè)計(jì)模式并不是拿來炫酷，而是能夠解決一些實(shí)際特別是架構(gòu)上問題。每次我們?cè)趫?zhí)行 wrappedUpdate 函數(shù)前，都會(huì)將 wrappedUpdate 緩存到一個(gè)全局變量。然后執(zhí)行完畢后將其置 null。

function

當(dāng)內(nèi)部執(zhí)行，depend 可以

autorun

問題的難點(diǎn)就是我們?yōu)槭裁匆?wrappedUpdate 函數(shù)，當(dāng) dependency 發(fā)生變化時(shí)再次調(diào) update 函數(shù)，更新函數(shù)依賴關(guān)系可能是動(dòng)態(tài)的，所以需要?jiǎng)討B(tài)將 activeUpdate 指向不同依賴。

var

我們這里先簡單介紹一下，其實(shí)觀察者模式就是通過注冊(cè)將一些函數(shù)添加到 subscribers 列表，觸發(fā)時(shí)遍歷數(shù)組執(zhí)行一些這些注冊(cè)方法來實(shí)現(xiàn)觀察者模式。

總結(jié)

以上是生活随笔為你收集整理的vue中渲染对象中属性时显示未定义_揭开 vue 背后的秘密(1)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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