手寫基礎版Vue響應式原理

我們新建了乙個obj物件，然後`new observe`

<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
<
/head>
0<
/h1>
"./index.js"
>
<
/script>
const obj =
newobserve
(obj)
<
/script>
<
/body>
<
/html>

let count =

0function
observe
(ops)
}

function

definerective
(obj, key, value)
,set
(val)})
}

// 假設這裡是更新頁面的方法

function
update()
次了`}

現在我們可以測試一下，讀取obj中的值，獲取設定obj中的值，看看能不能列印

const obj =
newobserve
(obj)
console.
log(obj.a)
obj.a =
4console.
log(obj.a)
## 瀏覽器列印如下:
i am get
1i am set
i am get
4沒問題

那麼既然讀取物件中的資料就要重新整理頁面，那麼我們這裡就測試一下，讀取一次頁面就加1，我們可以在get

/set中呼叫這個這個函式，達到更新檢視的作用
function
definerective
(obj, key, value)
,set
(val)})
}

之前我們測試的是普通的物件，假設現在我們裡面物件巢狀物件，那麼我們的**能否實現響應式呢？我們可以測試一下

const obj2 =
, b:
, c:3}
newobserve
(obj2)
console.
log(obj2.a.f)
console.
log(obj2)
// 經過列印obj2發現，只有第一層物件有get/set，所有並沒有實現深度相應
// 那麼我們就可以深度遍歷一下，如果物件的值還是乙個物件的話，我們可以遞迴呼叫observe函式來為我們的物件新增get/set方法
// 響應式
function
definerective
(obj, key, value)
,set
(val)})
}

下期我們來講講 用proxy來代替object.defineproperty的優勢，敬請期待!

!

手寫Vue3 0響應式原理

vue3.0 響應式原理 const toproxy new weakmap 放置的是 原物件 過的物件 防止多次 同乙個物件 const toraw new weakmap 放置的是 過的物件 原物件 防止 已經 過的物件 判斷是否為物件 function isobject val 判斷key是否...

手寫Vue2 0響應式原理

今天來實現乙個簡易版的vue2.0響應式 class vue 響應化 this.observe this.data 測試 new watcher this,test this.test 建立編譯器 new compile options.el,this if options.created 遞迴遍歷...

vue響應式布局 Vue 響應式原理

vue2 的資料偵測 在 src observer 目錄裡面，元件例項在初始化時，會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法，從而讓 data 變成可響應...