vue已經(jīng)用了好久啦，面試的時(shí)候經(jīng)常會(huì)被問到雙向數(shù)據(jù)綁定的原理，之前一直理解得模模糊糊，閑下來仔細(xì)研究了一下，然后就有了這篇文章惹~~(●'?'●)
1. 開始前我們要了解一下，Object.defineProperty是啥呢？？？
首先來了解下Object.defineProperty的語法：
Object.defineProperty(obj, prop, descriptor)
參數(shù)：
obj：要在其上定義屬性的對(duì)象
prop：要定義或修改的屬性的名稱
descriptor ：將被定義或修改的屬性描述符。
返回值：
被傳遞給函數(shù)的對(duì)象
簡單解釋，Object.defineProperty是ES5中的屬性，具有傳入一個(gè)描述對(duì)象即可描述一個(gè)對(duì)象的屬性的特性。
2.vue雙向數(shù)據(jù)綁定實(shí)現(xiàn)
//定義一個(gè)對(duì)象
const data = {
? ? _a :1,
? ? ?_b : 2
}
Object.keys(data).forEach(key=>{
? ?const newKey = key.slice(1)
? ?Object.defineProperty(data,newKey,{
? ? ? ?get(){
? ? ? ? console.log(`read data's propery: ${newKey}`) //讀取屬性
? ? ? ? return data[key]
? ? ? },
? ? ? set(v){
? ? ? ? console.log(`set data's propery:${newKey},value:${v}`) //設(shè)置屬性
? ? ? ? this[key] = v
? ?},
? ? enumberable: true
? ? ?})
? ? ?Object.defineProperty(data,key,{
? ? ? enumerable: false
? ? ?})
? ?})
data.b = 3 //傳入新值
console.log(data)
在這個(gè)例子中，data作為一個(gè)消息發(fā)布者，在將data所有屬性利用Object.defineProperty定義了他們的getter,setter后，每次更改data屬性時(shí)，都將執(zhí)行setter中定義的發(fā)布通知給watcher的邏輯。
總結(jié)來講，就是利用Object.defineProperty的get(),set()方式，通過watcher作為橋梁通信，來完成數(shù)據(jù)變化 —>視圖更新這一過程。
