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

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

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

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

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

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

Object

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

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

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

const

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

configurable

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

const

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

Object

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

Object

const

依賴最終

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

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

window

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

let

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

function

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

function

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

autorun

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

var

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

總結(jié)

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

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