Vue框架核心之資料劫持

引數obj:目標物件

prop:需要定義的屬性或方法的名稱

descriptor:目標屬性所擁有的特性

可供定義的特性列表

value:屬性的值

writable:如果為false，屬性的值就不能被重寫。

get: 一旦目標屬性被訪問就會調回此方法，並將此方法的運算結果返回使用者。

set:一旦目標屬性被賦值，就會調回此方法。

configurable:如果為false，則任何嘗試刪除目標屬性或修改屬性性以下特性（writable,    configurable, enumerable）的行為將被無效化。

enumerable:是否能在for...in迴圈中遍歷出來或在object.keys中列舉出來。

var data = 

object.keys(data).foreach(function(key),
set:function()
})})；data.name //控制台會列印出 「get」data.name = 'hxx' //控制台會列印出 "監聽到資料發生了變化"

export function definereactive (

obj: object,
key: string,
val: any,
customsetter?: function
)   // cater for pre-defined getter/setters  const getter = property && property.get  const setter = property && property.set
let childob = observe(val)//建立乙個觀察者物件  object.defineproperty(obj, key, 
if (array.isarray(value)) 
}return value//返回屬性值    },
set: function reactivesetter (newval) 
//這個是用來判斷生產環境的，可以無視      if (process.env.node_env !== 'production' && customsetter) 
if (setter)  else 
childob = observe(newval)//繼續監聽新的屬性值      dep.notify()//這個是真正劫持的目的，要對訂閱者發通知了    }
})}

const arrayproto = array.prototype//原生array的原型export const arraymethods = object.create(arrayproto)

;[  'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse']
.foreach(function (method) 
switch (method) 
if (inserted) ob.observearray(inserted)
// notify change    ob.dep.notify()
return result
})})...//定義屬性function def (obj, key, val, enumerable) );
}

var arraymethod = object.create(array.prototype);

['push','shift'].foreach(function(method)
var original = array.prototype[method];
console.log("已經控制了，哈哈");
return result;
},enumerable: true,
writable: true,
configurable: true    })
})var bar = [1,2];
bar.__proto__ = arraymethod;
bar.push(3);//控制台會列印出 「已經控制了，哈哈」;並且bar裡面已經成功的新增了成員 『3』

vm.items[index] = "***";

vm.items.length = 100;

var vm = new vue(,    el:'#id'})

function proxy (vm, key) ,

set: function proxysetter (val) 
});}}

Vue框架核心之資料劫持

引數obj 目標物件 prop 需要定義的屬性或方法的名稱 descriptor 目標屬性所擁有的特性 可供定義的特性列表 value 屬性的值 writable 如果為false，屬性的值就不能被重寫。get 一旦目標屬性被訪問就會調回此方法，並將此方法的運算結果返回使用者。set 一旦目標屬性被...

Vue核心之資料劫持

當前前端界空前繁榮，各種框架橫空出世，包括各類mvvm框架橫行霸道，比如anglar,regular,vue,react等等，它們最大的優點就是可以實現資料繫結，再也不需要手動進行dom操作了，它們實現的原理也基本上是髒檢查或資料劫持。那麼本文就以vue框架出發，探索其中資料劫持的奧秘 本文所選取的...

vue 資料劫持

其實，並沒有這麼 神奇 的事，資料劫持的核心就是在 物件的身上重新定義被 物件所有可列舉屬性，並設定 getter 和 setter 監視著它的變化，然而實現這個核心功能就是乙個方法 object.defineproperty 通過該方法在例項物件上重新定義了和data物件裡面的所有屬性，然而就實現...