let vm = new MVVM({
el:'#app',
data:{
message:{
a: 'hello zfpx',
},
a:1
}
})
複製程式碼vue中初始化一個vue例項是這樣用的，那麼MVVM內部原理究竟是怎麼實現的呢？
MVVM實現圖示如下
1. MVVM類實現
MVVM類主要功能：
- 存掛載的dom元素以及data
- 代理$data上的屬性到this例項上
- 呼叫Observer類資料劫持
- 將掛載的東西傳入Compile類，編譯模板
class MVVM{
constructor(options){
// 先把可用的東西掛載在例項上
this.$el = options.el;
this.$data = options.data;
// 如果有要編譯的模板，就開始編譯
if(this.$el){
// 資料劫持 就是把對想的所有屬性 改成get和set方法
new Observer(this.$data);
//將$data代理到this上
this.proxyData(this.$data);
// 用資料和元素進行編譯
new Compile(this.$el, this);
}
}
proxyData(data){
Object.keys(data).forEach(key=>{
Object.defineProperty(this,key,{
get(){
return data[key]
},
set(newValue){
data[key] = newValue
}
})
})
}
}
複製程式碼2. Observer類實現 Observer類主要功能：
- 將vue中data的每個屬性都改成劫持形式（set和get的形式），深度遞迴data物件的所有屬性
- 每個屬性都對應一個陣列（Dep類實現的方法），這個陣列存放所有更新的操作
class Observer{
constructor(data){
this.observe(data);
}
observe(data){
// 要對這個data資料將原有的屬性改成set和get的形式
if(!data || typeof data !== 'object'){
return;
}
// 要將資料 一一劫持 先獲取取到data的key和value
Object.keys(data).forEach(key=>{
// 劫持
this.defineReactive(data,key,data[key]);
this.observe(data[key]);// 深度遞迴劫持
});
}
// 定義響應式
defineReactive(obj,key,value){
let that = this;
// 每個屬性 都會對應一個陣列，這個陣列是存放所有更新的操作
let dep = new Dep();
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get(){
// 當取值時，將Dep.target（watcher即set屬性時，要執行的回撥函式）推入陣列
Dep.target && dep.addSub(Dep.target);
return value;
},
set(newValue){
// 當給data屬性中設定值的時候 更改獲取的屬性的值
if(newValue!=value){
// 這裡的this不是例項
// 如果是物件繼續劫持
// 比如你this.$data = {a: '2'}換成了一個新物件
that.observe(newValue);
value = newValue;
dep.notify(); // 通知所有watcher資料更新了
}
}
});
}
}
複製程式碼3. Dep類實現 Dep類的主要功能
- 訂閱，釋出更新通知
class Dep{
constructor(){
// 訂閱的陣列
this.subs = []
}
addSub(watcher){
this.subs.push(watcher);
}
notify(){
this.subs.forEach(watcher=>watcher.update());
}
}
複製程式碼4.watcher類實現
watcher功能
- 給每一個屬性新增一個觀察者，當屬性變化時，執行對應的更新操作
class Watcher{
// vm: vm例項 expr: {{message.a}}中的message.a cb：屬性更新後的回撥函式
constructor(vm,expr,cb){
this.vm = vm;
this.expr = expr;
this.cb = cb;
// 先獲取一下老的值，進入get方法，將watcher例項賦給Dep.target
//然後 執行this.getval()方法時，會讀取data物件上的屬性
// 一旦讀取屬性（資料劫持）
// 就會執行Observer類中的defineReactive方法
// 執行這裡：Dep.target && dep.addSub(Dep.target);
//將watcher例項推入訂閱的陣列
this.value = this.get(); // 讀取老值
}
// 獲取data物件上對應的expr屬性值
getVal(vm, expr) {
expr = expr.split('.'); // [message,a]
return expr.reduce((prev, next) => { // vm.$data.a
return prev[next];
}, vm.$data);
}
get(){
Dep.target = this;
let value = this.getVal(this.vm,this.expr);
Dep.target = null;
return value;
}
// 對外暴露的方法
//一旦給data物件的屬性設定值，就會執行Observer類defineReactive方法中的
// dep.notify()--》執行訂閱的陣列中的watcher佇列的update方法
update(){
let newValue = this.getVal(this.vm, this.expr);
let oldValue = this.value;
if(newValue != oldValue){
this.cb(newValue); // 對應watch的callback
}
}
}
// 用新值和老值進行比對 如果放生變化 就呼叫更新方法
複製程式碼5. Compile類實現 Compile類功能
- 把真實dom移入記憶體 fragment
- 編譯：結合模板和資料進行編譯，主要處理v-*, {{}},等其他vue特有的東西
- 把編譯好的fragment塞回到頁面裡去
class Compile {
constructor(el, vm) {
this.el = this.isElementNode(el) ? el : document.querySelector(el);
this.vm = vm;
if (this.el) {
// 如果這個元素能獲取到 我們才開始編譯
// 1.先把這些真實的DOM移入到記憶體中 fragment
let fragment = this.node2fragment(this.el);
// 2.編譯 => 提取想要的元素節點 v-model 和文字節點 {{}}
this.compile(fragment);
// 3.把編譯好的fragment在塞回到頁面裡去
this.el.appendChild(fragment);
}
}
/* 專門寫一些輔助的方法 */
isElementNode(node) {
return node.nodeType === 1;
}
// 是不是指令
isDirective(name) {
return name.includes('v-');
}
/* 核心的方法 */
compileElement(node) {
// 帶v-model v-text
let attrs = node.attributes; // 取出當前節點的屬性
Array.from(attrs).forEach(attr => {
// 判斷屬性名字是不是包含v-model
let attrName = attr.name;
if (this.isDirective(attrName)) {
// 取到對應的值放到節點中
let expr = attr.value;
let [, type] = attrName.split('-');
// node this.vm.$data expr
CompileUtil[type](node, this.vm, expr);
}
})
}
compileText(node) {
// {{}}的處理
let expr = node.textContent; // 取文字中的內容
let reg = /\{\{([^}]+)\}\}/g; // {{a}} {{b}} {{c}}
if (reg.test(expr)) {
// node this.vm.$data text
CompileUtil['text'](node, this.vm, expr);
}
}
compile(fragment) {
// 遞迴
let childNodes = fragment.childNodes;
Array.from(childNodes).forEach(node => {
if (this.isElementNode(node)) {
// 是元素節點，還需要繼續深入的檢查
// 這裡需要編譯元素
this.compileElement(node);
this.compile(node)
} else {
// 文字節點
// 這裡需要編譯文字
this.compileText(node);
}
});
}
node2fragment(el) {
// 需要將el中的內容全部放到記憶體中
// 文件碎片 記憶體中的dom節點
let fragment = document.createDocumentFragment();
let firstChild;
while (firstChild = el.firstChild) {
fragment.appendChild(firstChild);
}
return fragment; // 記憶體中的節點
}
}
CompileUtil = {
getVal(vm, expr) { // 獲取例項上對應的資料
expr = expr.split('.'); // [message,a]
return expr.reduce((prev, next) => { // vm.$data.a
return prev[next];
}, vm.$data);
},
getTextVal(vm, expr) {
// 獲取編譯文字後的結果 {{message.a}}--> message.a-->data.message.a
return expr.replace(/\{\{([^}]+)\}\}/g, (...arguments) => {
return this.getVal(vm, arguments[1]);
})
},
text(node, vm, expr) { // 文字處理
let updateFn = this.updater['textUpdater'];
// {{message.a}} => hello,zfpx;
let value = this.getTextVal(vm, expr);
// {{a}} {{b}}
expr.replace(/\{\{([^}]+)\}\}/g, (...arguments) => {
//每個屬性都對應一個watcher
new Watcher(vm, arguments[1],(newValue)=>{
// 如果資料變化了，文字節點需要重新獲取依賴的屬性更新文字中的內容
updateFn && updateFn(node,this.getTextVal(vm,expr));
});
})
updateFn && updateFn(node, value)
},
setVal(vm,expr,value){ // [message,a]
expr = expr.split('.');
// 收斂
return expr.reduce((prev,next,currentIndex)=>{
if(currentIndex === expr.length-1){
return prev[next] = value;
}
return prev[next];
},vm.$data);
},
model(node, vm, expr) { // 輸入框處理
let updateFn = this.updater['modelUpdater'];
// 這裡應該加一個監控 資料變化了 應該呼叫這個watch的callback
new Watcher(vm,expr,(newValue)=>{
// 當值變化後會呼叫cb 將新的值傳遞過來 （）
updateFn && updateFn(node, this.getVal(vm, expr));
});
node.addEventListener('input',(e)=>{
let newValue = e.target.value;
this.setVal(vm,expr,newValue)
})
updateFn && updateFn(node, this.getVal(vm, expr));
},
updater: {
// 文字更新
textUpdater(node, value) {
node.textContent = value
},
// 輸入框更新
modelUpdater(node, value) {
node.value = value;
}
}
}
複製程式碼