VUE框架VM对象的属性和Object对象的defineProperty方法------VUE框架

旧约Alatus

已于 2023-11-24 14:32:50 修改

阅读量1.1k

点赞数 30

分类专栏：前端 # VUE框架文章标签： vue.js 前端 javascript 前端框架 ecmascript vue js

于 2023-11-23 11:05:41 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134572293

版权

前端同时被 2 个专栏收录

332 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中对象属性的公开与私有特性，以及数据代理如何允许访问msg属性。同时讲解了ES5的defineProperty方法及其get和set方法在定义对象属性时的作用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        // Vue实例可以访问哪些属性
        // Vue的属性有的以$开始,有的以_开始
        // 所有以$开始的属性,可以视为公开的属性即public,这些属性供我们程序员调用
        // 所有以_开始的属性,可以看作是私有的属性,这些是框架底层的
        // 我们一般不调用
        const vm = new Vue({
            el : "#app",
            data : {
                // 为什么这里的msg属性可以被vm对象调用
                // 因为vue底层使用了数据代理机制
                msg : "Hello"
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="../js/vue.js"></script>

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>

</div>

<script>

// Vue实例可以访问哪些属性

// Vue的属性有的以$开始,有的以_开始

// 所有以$开始的属性,可以视为公开的属性即public,这些属性供我们程序员调用

// 所有以_开始的属性,可以看作是私有的属性,这些是框架底层的

// 我们一般不调用

const vm = new Vue({

el : "#app",

data : {

// 为什么这里的msg属性可以被vm对象调用

// 因为vue底层使用了数据代理机制

msg : "Hello"

}

});

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        // defineProperty是ES5新增的方法
        // 这个方法的作用是给对象新增属性,或者设置对象原有的属性
        // Object.defineProperty(给那个对象赋值,属性名,{配置项:值})
        // 第三个参数是属性相关的配置项,配置项有哪些,每个配置项的作用都是什么?
        // value配置项,给属性赋值
        // writable用于设置该属性的值是否可被修改
        // getter方法配置项
        // setter方法配置项
        // 这两个方法都不需要我们手动调用
        let phone = {};
        // 临时变量
        let temp;
        // 一个普通对象
        Object.defineProperty(phone,"color",{
            // 当我们使用了get和set方法的时候,我们的value和writable方法就都不可用了
            // value : "太空灰",
            // 设置该属性的值是否可以被修改
            // true表示可以修改,false表示不能修改
            // writable : true,
            // getter方法配置项
            get : function()
            {
                return temp;
            },
            // setter方法配置项
            // setter方法上有一个值,用来接收传递的值
            set : function(value)
            {
                temp = value;
            }
        });
        console.log(phone.color);
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello Vue"
            }
        });
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="../js/vue.js"></script>

<title>Document</title>

</head>

<body>

<div id="app">

<h1>{{msg}}</h1>

</div>

<script>

// defineProperty是ES5新增的方法

// 这个方法的作用是给对象新增属性,或者设置对象原有的属性

// Object.defineProperty(给那个对象赋值,属性名,{配置项:值})

// 第三个参数是属性相关的配置项,配置项有哪些,每个配置项的作用都是什么?

// value配置项,给属性赋值

// writable用于设置该属性的值是否可被修改

// getter方法配置项

// setter方法配置项

// 这两个方法都不需要我们手动调用

let phone = {};

// 临时变量

let temp;

// 一个普通对象

Object.defineProperty(phone,"color",{

// 当我们使用了get和set方法的时候,我们的value和writable方法就都不可用了

// value : "太空灰",

// 设置该属性的值是否可以被修改

// true表示可以修改,false表示不能修改

// writable : true,

// getter方法配置项

get : function()

{

return temp;

},

// setter方法配置项

// setter方法上有一个值,用来接收传递的值

set : function(value)

{

temp = value;

}

});

console.log(phone.color);

const vm = new Vue({

el : "#app",

data : {

msg : "Hello Vue"

}

});

</script>

</body>

</html>