MVVM
image.pngimage.png
image.png
data中所有属性,最后都出现在了vm上,
vm身上所有的属性以及vue原型上所有属性,在vue模板中都可以直接使用
get 和 set
<script type="text/javascript">
//Vue.config.productionTip = false
let number = 18
let person = {
name :'zhangdan',
sex:'male'
}// 可以被枚举(遍历)
Object.defineProperty(person,'age',{
// value:18,
// //age原本不可被枚举(遍历),若想被枚举,写 enumerable:true
// // 控制属性是否可以枚举,默认值false
// writeable:true, //控制属性是否能被修改,默认值false
// configurable:true,//控制属性是否能被删除,默认值false
//当有人读取person的age属性时,get函数(getter)会被调用,且返回值是age的值
get:function () {
return number
},
//当有人修改person的age属性时,set函数(setter)会被调用,且会收到修改的具体值
set(value) {
console.log('someone changed the value of age, and it will be ' , value)
}
})
//
console.log(person)
// 将person.age改成20后,控制台会输出。
// 但是下次访问person时,age显示的值还是18
// 若修改number为20时,下次访问person时,person.age的值为20
</script>
数据代理
def:通过一个对象代理对另一个对象中的属性操作 读/写
<script type="text/javascript">
let obj = { x:100 }
let obj2 = { y:200 }
// 通过obj2来操作x
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(v) {
obj.x = v
}
})
</script>
网友评论