使用頁面：
}change model
由:
observer ***
dep 通知器
watcher 觀察器處理重新整理
/**
* * @param {} obj 型別判斷
*/let gettype = (obj) =>
function watcher(vm, exp, fn)
}}watcher.prototype.get = function (exp)
watcher.prototype.parsegetter = function (exp)
return obj;
}}function dep()
this.notify = function () );
}}function observer(obj, key, value) )
};object.defineproperty(obj, key, ;
return value;
},set: function (newval)
})}/**
* * @param {} el 解析模板
*/function compile(el, vm)
}/**
* 判斷是否是元素
*/compile.prototype.iselementnode = function (el)
compile.prototype.node2fragment = function ($el)
return fragment;
}compile.prototype.init = function ()
compile.prototype.compileelement = function ($el) \}/;
/*** 判斷是否為元素節點
*/if (node.nodetype === 1)
//文字節點
if (node.nodetype === 3 && reg.test(text))
/*** 是否存在子節點
*/if (node.childnodes && node.childnodes.length)
})}/**
* 處理元素節點解析指令
*/compile.prototype.compile = function (node) else}})
}var compileutil = ,
//繫結文字表單
model:function(node, vm, exp));
},bind: function (node, vm, exp, dir) );
},//注入事件
eventhandler: function (node, vm, exp, dir)
},_getvmval: function (vm, exp) );
return val;
},_setvmval: function (vm, exp,value)
}var updater = ,
modelupdater: function (node, value) ,
};
function myvue(options)
let $this = this;
/*** 得到需要監聽的object 物件
*/this.$data = gettype(options.data) != 'object' ? {} : options.data;
this.$options = options;
this.proxykeys();
/*** ***，監聽this.$data 的屬性
*/object.keys(this.$data).foreach((key) =>);
options.created.call(this)
this.$compile = new compile(options.el || document.body, this)
/*** 執行mounted 函式方法，並且把作用域執行myvue 例項
*/options.mounted.call(this)
}/**
* proxykeys **屬性將this.$data 裡面的物件屬性都繫結到myvue 屬性上
* 列：this.$data.*** 擁有可以this.*** 例項直接獲取對應屬於他的屬性
*/myvue.prototype.proxykeys = function () ,
get()
})})
}
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...
vue雙向資料繫結原理
vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結，是怎麼實現的呢，首先vue利用es5的defineproperty方法裡的get，set...