代碼github地址： https://github.com/susantong/myMVVM

主要的方法有：

compile
深度遍歷前端界面的節點，將其復制進一個addQuene隊列中

pasers
遍歷所有的節點，并將節點包裝成一個含有本節點、自定義屬性及屬性值的對象。要想實現雙向綁定，重要的一步是，為自定義s-model的節點綁定事件(input框的雙向綁定，監聽oninput事件)

observe
可是說是最為關鍵的一步，它是MVVM框架實現雙向綁定的基礎。我們知道，是通過es5中的Object.defineproperty()去實現，劫持set和get屬性，以此來通知所有訂閱者做出改變。這一步也踩了一些坑，不過是一些比較小而基礎的錯誤，以此看出基礎的重要性，打好基礎是關鍵啊！這里展示出關鍵代碼:

this.watch = function(obj, callback) {this.$observeObj = function() {var that = this;this.callback = callback;//console.log(Object.keys(obj));Object.keys(obj).forEach(function(prop) {var val = obj[prop];Object.defineProperty(obj, prop, {get: function() {return val;},set: function(newVal) {var temp = val;//console.log(newVal);val = newVal;//通知所有訂閱者改變that.cache.forEach(function(item) {if (item[prop]) {item[prop] = newVal;}});that.callback();},enumerable: true,configurable: true});});}this.$observeObj();};this.observe = function() {this.watch(data, this.render);};

render
剛開始渲染或數據發生改變時需要重新渲染。這個函數的主要點在于，對于指令的實現，比如s-text,就是簡單的數據展現，s-show需要操作css的display屬性等，這些都可以通過查看官網去看細節，然后去操作數據，以達到相同的效果。

初期的效果已經實現，更多的指令需要去拓展，看懂了就不會覺得vue如此神秘了~

轉載于:https://www.cnblogs.com/susantong/p/6883167.html

總結

以上是生活随笔為你收集整理的仿照vue实现简易的MVVM框架（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。