Object.defineProperty
vuejs的雙向數(shù)據(jù)綁定就是通過(guò)他實(shí)現(xiàn)的(劃重點(diǎn)!~)
vuejs中data下的屬性都添加了set和get,所以數(shù)據(jù)改變觸發(fā)set,而set會(huì)觸發(fā)視圖更新。computed計(jì)算緩存就是這個(gè)道理,當(dāng)data沒(méi)有改變,computed會(huì)將之前計(jì)算的結(jié)果返回,從而形成計(jì)算緩存。
先來(lái)個(gè)demo:
var a={};
Object.defineProperty(a,"test",{
? ? value:2017
})
console.log(a.test);//2017
參數(shù)詳解:
第一個(gè)參數(shù):目標(biāo)參數(shù)
第二個(gè)參數(shù):需要定義的屬性或者方法的名字
第三個(gè)參數(shù):目標(biāo)屬性所擁有的特性(descriptor)
其中第三個(gè)參數(shù)還有以下參數(shù)!:
value:value值
writable:如果為false,屬性為只讀
configurable:總開(kāi)關(guān),如果為false,就不能在設(shè)置(value,writable,configurable 這里劃重點(diǎn)?。?/p>
enumerable:是否在for in ?中遍歷出來(lái)
set:訪問(wèn)器set
get:訪問(wèn)器get
如果只設(shè)置value,相當(dāng)于:
var a={};
Object.defineProperty(a,"test",{
value:2017,
writable:false,
enumerable:false,
configurable:false
})
console.log(a.test);//2017
但是只設(shè)置value,對(duì)set和get不起作用。
set和get
如果設(shè)置了set和get,就不能設(shè)置writable和value,否則會(huì)報(bào)錯(cuò)。
使用demo:
var a={};
Object.defineProperty(a,"testDemo",{
? ? set:function(val){
? ? ? ? ?console.log(val);
? ? },
? ? get:function(){
? ? ? ? ? return ?"get內(nèi)容"
? ? }
})
a.testDemo="我是set";//我是set
console.log(a.testDemo);//get內(nèi)容