属性特性
第一种类型:值属性
* 值:value
* 可修改性(writable):true/false
* 可枚举性(enumerable):true/false
* 可配置性(configurable):true/false,设置writable和enumerable是否可修改
第二种类型:存储器属性
* configurable
* enumerable
* getter:获取
* setter:设置
Object.defineProperty()
*/
let person = {
name:'laoxie',//jingjing
age:18
}
let vm = new Vue({
el:'.root',
// 把person对象挂载到Vue的实例,自动实现以下操作
// * 遍历person所有的属性,并把他们设置成存储器属性(setter&getter)
data:person
});
console.log(vm);
vm.name = 'didi';
vm.gender = '女';
//getter&setter
let lx = {
name:'laoxie',
age:18,
gender:'male',
}
// Object.defineProperty(lx,'age',{configurable:false});//
Object.defineProperty(lx,'age',{writable:false,enumerable:false})
// Object.defineProperties(lx,{
// age:{writable:false,enumerable:false},
// gender:{
// //...
// }
// })
lx.age = 30;
for(var key in lx){
console.log(key);//name,age,gender
}
// 存储器属性
Object.defineProperty(lx,'nickname',{
enumerable:true,
get(){
//获取属性值,必须有返回值
return 100
},
set(val){console.log('setter:',val)
//设置属性值,用于设置其他属性
this.name = val;
}
});
// lx.nickname;//调用get,得到100
// lx.nickname = 'laoxie 666';//调用set,把值传入set
// 实例化Vue时,会自动遍历data下的属性,并把他们变成存储器属性
let person2 = {...person};
for(var key in person2){
Object.defineProperty(person2,key,{
get(){
return person[key]
},
set(val){
person[key] = val;
}
})
}
person2.name = 'xxx'
Vue数据驱动的原理
最新推荐文章于 2023-06-02 09:32:54 发布