Vue中的数据代理原理剖析

最新推荐文章于 2024-05-02 16:40:04 发布

ErvinBao

最新推荐文章于 2024-05-02 16:40:04 发布

阅读量207

点赞数 1

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/ErvinBao/article/details/130539163

版权

1.Vue中的数据代理：

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

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读写）data中对应的属性

Object.defineProperty()使用

    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18
        })
        console.log(Object.keys(person))
    </script>

此时age属性不可枚举, 未遍历出age属性,且age属性字段颜色和其他属性有区别

增加配置项enumerable 控制属性是否可以枚举

   <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true, // 控制属性是否可以枚举，默认FALSE
        })
        console.log(Object.keys(person))
    </script>

此时属性age可枚举，遍历中显示age，且person对象中age属性颜色和其他属性一致，

但是age属性不可更改，需要增加其他配置

增加配置项writable 控制属性是否可以被修改

    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true, // 控制属性是否可以枚举，默认FALSE
            writable:true, // 控制属性是否可以被修改，默认FALSE
        })
        console.log(Object.keys(person))
    </script>

此时age属性可以被修改，但是age属性不可以被删除,需要增加其他配置项

增加配置项configurable 控制属性是否可被删除

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

此时属性age可以被删除

场景：person中的age属性由变量控制

    <script type="text/javascript">
        let number = 18
        let person = {
            name:'张三',
            sex:'男',
            age: number
        }
        console.log(Object.keys(person))
    </script>

此时虽然age被赋值为18，但是当修改number的时候，age不会更改

需求：当number更改的时候age也会一起更改

此时就需要借助object.defineProperty()中的get配置项实现

    <script type="text/javascript">
        let number = 18
        let person = {
            name:'张三',
            sex:'男',
        }
        Object.defineProperty(person,'age',{
            // 当有人读取person的age属性时，get还是就会被触发，且返回值就是age的值
            get: function(){
                return number
            }
        })
        console.log(Object.keys(person))
    </script>

此时发现已经有年龄的属性，但是发现age的值显示(...)鼠标放上去显示invoke property getter

点击(...)显示具体的值,并且修改number的值，age的值也会跟着变化

修改person的age属性则需要借助object.defineProperty()中的set配置项实现

    <script type="text/javascript">
        let number = 18
        let person = {
            name:'张三',
            sex:'男',
        }
        Object.defineProperty(person,'age',{
            // 当有人读取person的age属性时，get还是就会被触发，且返回值就是age的值
            get: function(){
                return number
            },
            // 当有人修改person的age属性时，set函数（setter）就会被调用，且会受到具体的值
            set(value){
                number = value
            }
        })
        console.log(Object.keys(person))
    </script>

此时person的age属性可以修改

查看Vue代码分析

<body>
    <div id="root">
        <h1>姓名：{{name}}</h1>
        <h1>年龄：{{age}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip=false
    </script>
    <script type="text/javascript">

    const vm = new Vue({
        el:"#root",
        data:{
            name:'ervin',
            age:29
        }
    })
    </script>
</body>