6. 数据代理

最新推荐文章于 2024-05-27 08:52:59 发布

Sun Jiakai_凯

最新推荐文章于 2024-05-27 08:52:59 发布

阅读量90

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/s12345672/article/details/119704579

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
    1. vue中的数据代理：
        通过vm对象来代理data对象中的属性的操作（读/写）
    2. Vue中数据代理的好处：
        更加方便的操作data中的数据
    3. 基本原理：
        通过Object.defineProperty()把data对象中所有属性添加到vm上
        为每一个添加到vm上的属性，都指定一个getter和setter
        在getter和setter内部去操作（读/写）data中对应的属性

<!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>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            let obj1 = {x:100}
            let obj2 = {y:200}
            Object.defineProperty(obj2,'x',{
                get(){
                    return obj1.x
                },
                set(value){
                    obj1.x = value
                }
            })
        </script>
    </body>
</html>

Sun Jiakai_凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6. 数据代理

数据代理数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） 1. vue中的数据代理：通过vm对象来代理data对象中的属性的操作（读/写） 2. Vue中数据代理的好处：更加方便的操作data中的数据 3. 基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上为每一个添加到vm上的属性，都指定一个getter和setter 在getter和
复制链接

扫一扫