Vue的Object.defineProperty、数据代理、vue中的数据代理

Bulut0907

于 2024-08-05 09:07:37 发布

阅读量349

点赞数 6

分类专栏： Vue 文章标签： vue.js defineProperty 数据代理 getter setter

本文链接：https://blog.csdn.net/yy8623977/article/details/131620422

版权

Vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1. Object.defineProperty

可以通过Object.defineProperty动态定义属性和设置属性的值。其中设置属性的值可以通过value:18设置，也可以通过getter和setter进行设置。具体的使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>


<script type="text/javascript">
    let number = 18
    let person = {
        name: '张三',
        sex: '男'
    }

    Object.defineProperty(person, 'age', {
        // value:18,
        // enumerable:true, //控制属性是否可以枚举，默认值是false
        // writable:true, //控制属性是否可以被修改，默认值是false
        // configurable:true, //控制属性是否可以用[delete person.age]删除，默认值是false

        // 除了通过value:18静态设置age的值。还可以通过number动态get和set age属性的值
        // 当有人调用[person.age]时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            return number
        },

        // 此时即使writable:false，也是可以修改number，即age的值
        //当有人调用[person.age=19]时，set函数(setter)就会被调用，且set函数会返回修改后的值
        set(value) {
            number = value
        }

    })

</script>

</body>
</html>

2. 数据代理

通过一个对象代理对另一个对象中属性的读写操作。如下通过obj2代理obj1的x属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>


<script type="text/javascript">
    let obj = {x: 100}
    let obj2 = {y: 200}

    Object.defineProperty(obj2, 'x', {
        get() {
            return obj.x
        },
        set(value) {
            obj.x = value
        }
    })
</script>

</body>
</html>

3. vue中的数据代理

通过vm对象来代理data对象中属性的读写操作

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去读/写data中对应的属性

如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>


<div id="root">
    <h2>名称：{{name}}</h2>
</div>

<script type="text/javascript">

    const vm = new Vue({
        el:'#root',
        data:{
            name:'jim'
        }
    })
</script>

</body>
</html>

在vm实例中，访问vm.name和vm._data.name是一样的。可以通过这两对data中的name属性进行读写
vue数据代理