查看“Vue Object.defineProperty”的源代码

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=11

=== ES6 往对象上添加属性 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person, 'age', {
            value:18
        })
        console.log(person);
    </script>
</body>
</html>
</syntaxhighlight>

=== 通过 Object.defineProperty 添加的属性遍历不到 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18
         })
        console.log(Object.keys(person));
        console.log(person);
    </script>
</body>
</html>
</syntaxhighlight>证明通过 Object.defineProperty 添加的属性不可枚举<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18
         })
        //console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>
</syntaxhighlight>

=== 通过 enumerable:true 让 Object.defineProperty 添加的属性可枚举 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            // age:18
        }
         Object.defineProperty(person, 'age', {
             value:18,
             enumerable:true //控制属性是否可以枚举，默认值是 false
         })
        //console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>
</syntaxhighlight>

=== 可以在 console 里改变 let 声明的对象属性值 ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾Object.defineProperty方法</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男',
            age:18
        }
        //  Object.defineProperty(person, 'age', {
        //      value:18,
        //      enumerable:true, //控制属性是否可以枚举，默认值是 false
        //  })
        //console.log(Object.keys(person));

        for (let key in person) {
            console.log('@', person[key]);
        }

        console.log(person);
    </script>
</body>
</html>
</syntaxhighlight>在 console 里通过 person.age=19 给 person.age 赋新值，然后再在 console 中通过 person.age 输出，发现值改变了

=== 通过 Object.defineProperty 给对象添加的属性值无法被改变 ===