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

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

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

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

部分內容參考了 evan 給出教程。

我們今天在動手寫 vue 之前也對 vue 內部是如何實現以上兩件事

Object

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

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

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

const

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

configurable

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

const

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

Object

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

Object

const

依賴最終

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

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

window

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

let

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

function

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

function

當內部執行，depend 可以

autorun

問題的難點就是我們為什么要用 wrappedUpdate 函數，當 dependency 發生變化時再次調 update 函數，更新函數依賴關系可能是動態的，所以需要動態將 activeUpdate 指向不同依賴。

var

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

總結

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

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