Object.defineProperty（） 以及 vue 中雙數據綁定的底層原理
阿新 • • 發佈：2018-10-06
ble tlist 效果 先來 pan 圖片 setter pla es5
Object是在javascript中一個被我們經常使用的類型，而且JS中的所有對象都是繼承自Object對象的。雖說我們平時只是簡單地使用了Object對象來存儲數據，並沒有使用到太多其他功能，但是Object對象其實包含了很多很有用的屬性和方法，尤其是ES5增加的方法，今天我們先探討一下Object.defineProperty（）。 Object.defineProperty 給一個對象添加或者修改屬性 返回的是一個對象 語法 Object.defineProperty(obj, prop, descriptor) 參數 obj要在其上定義屬性的對象。 prop要定義或修改的屬性的名稱。
<body>
<input type="text" id="txt">
<p id="msg"></p>
</body>
行為層代碼為
var obj = {message:"mvvm-demo"}
var oTxt = document.getElementById("txt");
var oMsg = document.getElementById("msg");
Object.defineProperty(obj,"message",{
configurable:true,
enumerable:true,
set:function(newStr){
oMsg.innerText = newStr;
}
})
oTxt.addEventListener("input",function(){
obj.message = oTxt.value;
})
實現效果圖如下
接下來我們來模擬一下vue中MVVM底層原理
結構層代碼
<body>
<div id="app">
<input type="text" v-model="message">
<p>{{message}}</p>
<input type="text" v-model="name">
<p>{{name}}</p>
</div>
</body>
行為層代碼
function Vue(options){
this.el = document.querySelector(options.el);
this.data = options.data;
//是數據層和view之間的一個映射關系這裏面存放這個需要雙數據綁定的元素和當前元素的一些特征
this.viewModel = {};
this.init(this.data);
this.eventType(this.el);
}
Vue.prototype = {
constructor:Vue,
init:function(obj){
var _this = this;
Object.keys(obj).forEach(function(key){
var value = obj[key];
//將當前key值作用的元素一些特征保存在這個數組裏面
_this.viewModel[key] = {
_directive:[]
}
console.log(_this.viewModel)
Object.defineProperty(obj,key,{
configurable:true,
enumerable:true,
get:function(){
return value;
},
set:function(newValue){
if(newValue!=value){
value = newValue;
//數據更新
_this.viewModel[key]._directive.forEach(function(item){
item.update();
})
}
}
})
})
},
eventType:function(root){
var childs = root.children;
var _this = this;
for(var i=0;i<childs.length;i++){
if(childs[i].hasAttribute("v-model") && childs[i].tagName == "INPUT"){
childs[i].addEventListener("input",(function(i){
var attr = childs[i].getAttribute("v-model");
_this.viewModel[attr]._directive.push(new watch(
childs[i].tagName,
"value",
childs[i],
_this,
attr
))
return function(){
//vm.data.message =
_this.data[attr] = childs[i].value;
}
})(i))
}
if(childs[i].innerText.replace(/\{\{|\}\}/g,"")){
var dataAttr = childs[i].innerText.replace(/\{\{|\}\}/g,"");
_this.viewModel[dataAttr]._directive.push(new watch(
childs[i].tagName,
"innerText",
childs[i],
_this,
dataAttr
))
}
}
}
}
//更新數據的方法 標簽的名稱 當前元素 當前元素的屬性 vue的實例 data屬性
function watch(name,exp,el,vm,attr){
this.name = name;
this.exp = exp;
this.el = el;
this.vm = vm;
this.attr = attr;
this.update();
}
watch.prototype.update = function(){
this.el[this.exp] = this.vm.data[this.attr];
}
var vm = new Vue({
el:"#app",
data:{
message:"demo",
name:"mvvm"
}
})
效果實現圖如下
Object.defineProperty（） 以及 vue 中雙數據綁定的底層原理