vue学习(7)Object.defineProperty

简介: vue学习(7)Object.defineProperty
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineproperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person ={
   
            name:'jack',
            sex:'男'
        }
        let num =18;
        Object.defineProperty(person,'age',{
   
            value:18,
            enumerable:true,//控制属性是否可枚举,默认值是false
            writable:true,//控制属性是否可以被修改,默认值为false
            configurable:true,//控制属性是否可以被删除,默认为false

            //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值。
            get(){
   
                console.log('有人读取了age值');
                return num;
            },
            //当有人修改person的age的属性值时,set函数(setter)就会被调用。且会收到修改的具体值。
            set(value){
   
                console.log('有人修改了age值');
                num = value;
            }
        })
        console.log(person);
        console.log(Object.keys(person));
    </script>
</body>
</html>

image.png
打印出来可以看到和其他两个属性的颜色不一样,表示不可枚举,就是不可遍历,使用循环,无法获取到age。

知识点:
1:Object.defineProperty,定义一个对象的属性。参数:1对象名,2要定义的属性名,3属性的一些特性。
2:第三个参数:包含:
value:属性的值
enumerable:控制属性值是否可枚举,默认值时false
writable:控制属性值是否可以被修改,默认值为false
configurable:控制属性是否可以被删除,默认值为false
get:当有人读取定义的属性值时,getter就会被调用,返回值,就是属性的值。
set:当有人修改定义的属性值时,setter就会被调用,且会收到修改的具体值。

目录
相关文章
|
Java API 开发工具
从零开始学习 Java:简单易懂的入门指南之Runtime、Object(十三)
从零开始学习 Java:简单易懂的入门指南之Runtime、Object(十三)
|
2月前
|
JavaScript
Vue 的响应式原理中 Object.defineProperty 有什么缺陷
Vue 的响应式原理主要依赖于 `Object.defineProperty`,但该方法存在一些缺陷:无法检测到对象属性的添加和删除,且对大量数据进行代理时性能较差。Vue 3 中改用了 Proxy 来解决这些问题。
|
7月前
|
JavaScript
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
Vue报错 Invalid default value for prop “list“: Props with type Object/Array must use a factory
358 0
|
7月前
|
JavaScript
Vue : Object.defineProperty()
Vue : Object.defineProperty()
49 2
|
7月前
|
Java
【JAVA学习之路 | 基础篇】Object类及重写的equals()与toString()
【JAVA学习之路 | 基础篇】Object类及重写的equals()与toString()
|
7月前
|
JavaScript 数据安全/隐私保护 开发者
常见的vue面试中的proxy和object.defineProperty的区别
常见的vue面试中的proxy和object.defineProperty的区别
|
7月前
|
Python
Python学习 -- 根类object
Python学习 -- 根类object
42 0
【Vue2.0学习】—Object.defineProperty(三十)
【Vue2.0学习】—Object.defineProperty(三十)
|
7月前
|
JavaScript
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the
[Vue warn]: Method “components“ has type “object“ in the component definition. Did you reference the
|
JSON JavaScript 数据格式
vue query传参刷新后数据变成[Object Object]
vue query传参刷新后数据变成[Object Object]
161 0