Vue 響應式解析

lang

="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, intial-scale=1"
>
>
vue 響應式解析title
>
head
>
>
>
div>
>
getelementbyid()
// 對單個物件使用響應式繫結
function
definereactive
(obj, key, val): $
`)return val
},// 除了要改變資深的值
// 還要觸發與之相關值的變化
set(newval)}}
)}// 資料更新後要觸發的更新動作，如通知檢視發生變化
function
update()
// 使物件的第一層資料變成響應式
function
observe
(obj))}
// 處理物件動態新增的屬性
function
set(obj, key, val)
script
>
body
>
html
>

接下來會將上圖各部分分開解析

>

>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1"
>
>
vue 響應式title
>
head
>
>
>
>
}p>
@click
="handleclick(counter)"
>
}p>
v-text
="counter"
>
p>
v-html
="desc"
>
p>
>
for=
"v-model-test"
>
v-model-test
type
="text"
name
="v-model"
id="v-model-test"
v-model
="text"
/>
label
>
>
}p>
div>
div>
src=
"myvue.js"
>
script
>
>
newvue(,
methods:`)
}}})
setinterval((
)=>
,1000
)script
>
body
>
html
>

編譯模板

class

vue}
// 對單個物件進行響應式繫結
function
definereactive
(obj, key, val)
,// 除了要改變自身的值
// 還要出發與之相關值的變化
set(newval)}}
)}

仔細看一下new vue()，對於資料的修改是直接取來修改的

比如說修改data中的counter，在內部可以直接使用this.counter++就使其自增

// proxy(this)

function
proxy
(vm)
,set
(v)})}
)}

// observe(this.$data)

function
observe
(obj)
// 根據傳入 value 的型別做相應的響應式處理
class
observer
else
}// 物件響應式
walk
(obj)
}

// 1.處理差值表示式

// 2.處理指令和事件
// 3.以上兩者的初始化和更新
class
compile
}// 從根節點開始編譯
compile
(el)
// 事件處理
if(attrname.
startswith
('@'))
)return
} node.
addeventlistener
(action,
this
.$vm.$methods[fn]
.bind
(this
.$vm))}
})}// 文字節點if(
this
.isinter
(node)
)// 其他情況...
// 遞迴遍歷節點
if(node.childnodes)})
}// 判斷是否為差值表示式
isinter
(node)
\}/.
test
(node.textcontent)
}// 為以下函式的更新操作抽象出來
update
(node, exp, directive)})
}// 各指令要做的事
// v-text
text
(node, exp)
// v-html
html
(node, exp)
// v-model
model
(node, exp)
// 各指令的操作函式
textupdater
(node, exp)
htmlupdater
(node, exp)
modelupdater
(node, exp))}
}

class

watcher
update()
}

class

depadddep
(dep)
notify()
}

最後，非常感謝你能看到這裡！祝大家變得更強！

二 vue響應式解析

在使用vue時，需要修改設計屬性值的時候，頁面的資料直接更新。使用js中 object.defineproperty 這個方法實現 上述方法需要的引數 object.defineproperty 物件,設定什麼屬性名 將物件轉換為響應式 var o function definereactive t...

vue響應式原理解析

vue響應式原理解析 首先定義了四個核心的js檔案 1.observer.js 觀察者函式，用來設定data的get和set函式，並且把watcher存放在dep中 2.watcher.js 監聽者函式，用來設定dep.target開啟依賴收集的條件，和觸發檢視的更新函式 3.compile.js ...

Vue響應式原理深入解析

vue最明顯的特性之一便是響應式系統，其資料模型即是普通的 j ascript 物件。而當你讀取或寫入它們時，檢視便會進行響應操作。響應式data div id exp div const vm new vue vm.message this is b 響應式 vm.message this is ...