Vue中数据代理与事件处理

最新推荐文章于 2024-02-28 10:26:11 发布

执久呀

最新推荐文章于 2024-02-28 10:26:11 发布

阅读量1.6k

点赞数 7

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_60719453/article/details/128115716

版权

数据代理

Object.defineProperty

数据代理

Object.defineProperty

常见属性值

<body>
<script type="text/javascript">
let person={
    name:"kc",
    sex:"男"
}
Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,//控制属性是否可以枚举（遍历），默认是false
    writable:true,//控制属性是否可以修改，默认是false
    configurable:true//控制属性是否可以删除，默认是false
    }
)
console.log(Object.keys(person))//遍历
    // console.log(person)
</script>


</body>

get和set函数

<body>
<script type="text/javascript">
    let num=20;
let person={
    name:"kc",
    sex:"男"
}
Object.defineProperty(person,'age',{

    //当有人读取person的age属性时get函数（getter）就会被调用，且返回值就会age的值
       //原始写法 get:function(){}  ---->  简写  get(){}    
get() {
        console.log("age属性被访问了")
       return num
    },

    //当有人修改age属性的值时，set函数就会被调用
    set(value) {
        console.log("age的值被修改了，值为"+value)
        num=v