*主要功能是下面2個
*1、def設定proxy**
*2、observe觀察資料
*/ function initdata (vm) ;
if (!isplainobject(data)) ;
warn(
'data functions should return an object:n' +
'',vm);}
var keys = object.keys(data);
var props = vm.$options.props;
var methods = vm.$options.methods;
var i = keys.length;
while (i--)
}if (props && hasown(props, key)) else if (!isreserved(key))
}// 觀察資料
observe(data, true /* asrootdata */);
}
/**
* 判斷當前資料是否為物件
* 判斷__ob__屬性是否存在，存在則直接引用，不存在則建立observer例項
* 如果是根資料則計數
*/function observe (value, asrootdata)
var ob;
//__ob__:裡面存放了該屬性的觀察器，也就是observer的例項，防止重複繫結。
if (hasown(value, '__ob__') && value.__ob__ instanceof observer) else if (
shouldobserve &&
!isserverrendering() &&
(array.isarray(value) || isplainobject(value)) &&
object.i***tensible(value) &&
!value._isvue
) if (asrootdata && ob)
return ob
}
/**
*將observer例項繫結到目標物件的__ob__屬性
*判斷當前目標物件是否為陣列
*是陣列則監聽陣列的方法，並且為陣列的每個成員嘗試構建乙個observer例項（即呼叫observe函式）
*是物件則響應式物件的屬性
*/var observer = function observer (value) else
this.observearray(value);//對陣列型別的成員進行繫結
} else
};
/**
* 迴圈遍歷進行資料繫結
*/observer.prototype.walk = function walk (obj)
};
/**
* 迴圈遍歷，觀察陣列的每一項
*/observer.prototype.observearray = function observearray (items)
};
/**
* 設定getter、setter
* 建立dep訂閱器
*/function definereactive$$1 (
obj,
key,
val,
customsetter,
shallow
) // cater for pre-defined getter/setters
var getter = property && property.get;
var setter = property && property.set;
if ((!getter || setter) && arguments.length === 2)
// console.log('definereactive$$1===>',dep,dep,dep.target);
var childob = !shallow && observe(val);
object.defineproperty(obj, key, }}
return value
},set: function reactivesetter (newval)
/* eslint-enable no-self-compare */
if (customsetter)
// #7981: for accessor properties without setter
if (getter && !setter)
if (setter) else
childob = !shallow && observe(newval);
// 通知訂閱我這個dep的watcher們:我更新了
dep.notify();
}});
}
/*
*負責編譯template
*1、返回ast語法樹
*2、返回render函式
*3、返回靜態render的陣列
compile編譯流程圖
參考：vue原始碼學習筆記之compilecassieran.github.io
神仙朱：【vue原理】compile - 白話版zhuanlan.zhihu.com
vue 雙向繫結資料的原理
vue能做到雙向繫結資料靠的就是object.defineproperty 俗稱屬性 例如 平時我們定義乙個引數 是這樣的 var book console.log book.name 一般的引數 但是你想在輸出的同時對引數進行一些操作 var book var name object.define...
Vue雙向繫結
把乙個普通物件 a 傳給 vue 例項作為它的 data 選項，vue.js 將遍歷它的屬性，用object.defineproperty 將它們轉為 getter setter,如圖綠色的部分所示。每次使用者更改data裡的資料的時候，比如a.b 1，setter就會重新通知watcher進行變動...
Vue 雙向繫結
在react或者vue這類mvvm框架中使用雙向繫結是很常見的需求，最近專案中在使用vue，今天來談一談vue中雙向繫結的實現。先來說幾句廢話 什麼是雙向繫結？把model中的資料繫結到view中，然後更新model時view會自動跟新，這叫單向繫結，而當使用者改變view時model中資料也能自動...