深度挖掘vue及雙向資料繫結原理

本文簡單模擬vue的實現過程以及雙向資料繫結的原理，雙綁原理在面試時基本上是逃不過的問題。

新建index.html檔案

}}

}呵呵噠

// new yvue(  } )

class yvue 
} obverse (value) 
// 遍歷該物件
object.keys(value).foreach(key => )
} // 資料響應化
definereactive (obj, key, val) ,
set (newval) 
val = newval;
// console.log(`$屬性更新了：$`);
dep.notify();}})
} proxydata (key) ,
set (newval) 
})}}
// dep:用來管理watcher
class dep 
adddep (dep) 
notify () 
}//watcher
class watcher 
update () 
}

//用法 new compile(el,vm)

class compile 
} //將宿主元素中的**片段拿出來遍歷，這樣做比較高效
node2fragment (el) 
return frag;
} //編譯過程
compile (el) 
if (this.isevent(attrname)) 
})} else if (this.isinterpolation(node)) 
//遞迴子節點
if (node.childnodes && node.childnodes.length > 0) 
})} compiletext (node) 
// 更新函式
update (node, vm, exp, dir) )
} text (node, vm, exp) 
//雙向繫結的處理
model (node, vm, exp) )
} html(node, vm, exp)
modelupdater (node, value) 
htmlupdater (node, value) 
textupdater (node, value) 
isdirective (attr) 
isevent (attr) 
// 事件處理器
eventhandler (node, vm, exp, dir) 
} iselement (node) 
// 插值文字
isinterpolation (node) \}/.test(node.textcontent);
}}

原始碼見github，點這裡

Vue及雙向繫結

1 易用 使用成本低 2 靈活 生態系統完善，試用於任何規模的專案 3 高效 體積小，優化好，效能好 vue是乙個mvvm的js 框架，但是，vue 的核心庫只關注檢視層，開發者關注的只是m v的對映關係，也就是說我們就是關心的對映關係。1 mvc的之間關係 通訊都是單向的。view 傳送指令到co...

vue雙向資料繫結

話術 vue中v model可以實現雙向繫結，其核心思想通過object.definepropery來對vue的資料進行資料劫持。主要分為四部分 第一部分observer主要是負責對vue資料進行資料劫持，使其資料擁有get和set方法 第二部分指令解析器負責繫結資料和指令，繫結試圖更新方法 第三部...

vue雙向資料繫結

1.資料響應式原理 主要是利用object.defineproterty 來自定義object的getter,setter function observe value,cb function definereactive obj,key,val,cb set newval class vue da...