VUE的数据代理

最新推荐文章于 2024-08-05 09:07:37 发布

florachy

最新推荐文章于 2024-08-05 09:07:37 发布

阅读量330

点赞数

分类专栏： VUE 文章标签： VUE

本文链接：https://blog.csdn.net/florachy/article/details/124280685

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

回顾_Object.defineProperty

新建文件【_Object.defineProperty.html.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>_Object.defineProperty</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器 -->
        <div id="root">
         
        </div>
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
        let number=17
        let person = {
            name:"flora",
            sex: "female",
        }
        Object.defineProperty(person, 'age',{
            // value:18,
            // enumerable:true,  // 控制属性是否可以枚举，默认为false
            // writable:true, // 控制属性是否可以被修改，默认为false
            // configurable:true, //控制属性是否可以被删除，默认为false
            // 当有人读取person的age属性时，get函数就会被调用且返回值就是age的值
            get:function(){
                console.log("有人查询年龄了~")
                return number
            },
            // 当有人修改person的age属性时，set函数（setter）就会被调用且会收到修改的具体的值
            set(value){
                console.log("有人修改了age属性，且值是", value)
                number = value

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

何为数据代理

新建文件【何为数据代理.html】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>_Object.defineProperty</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <!-- 数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写） -->
        
        <!--阻止vue在启动时生成生产提示 -->
        <script type="text/javascript">
        Vue.config.productionTip=false
        let obj = {x:100}
        let obj2 = {y:200}
        Object.defineProperty(obj2, "x", {
            get(){
                return obj.x
            },
            set(value){
                obj.x=value
            }
        })
        </script>
       
    </body>
</html>