敖胤

绳锯木断，水滴石穿；聚沙成塔，集腋成裘。

导航

Vue数据代理

数据代理：通过一个对象操作另一个对象的属性和方法。JavaScript中通过Object.defineProperty()函数来实现。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>value_bind</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            Vue.config.productionTip = false;//关闭生产提示
            let obj0 = {x:10}
            let obj1 = {y:20}

            Object.defineProperty(obj1, "x", {
                set(v) {
                    obj0.x = v;
                },
                get() {
                    return obj0.x;
                }
            });
        </script>
    </body>
</html>

Vue中的数据代理：

  1. 通过vm对象，来代理data对象中的属性的操作。
  2. 更方便的操作data中的数据。
  3. 通过Object.defineProperty()把data中的属性添加到vm对象上，为每个属性添加getter/setter，在getter/setter内部去操作data中的属性。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>proxy</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div class="root">
            <h1>姓名：{{name}}</h1>
            <h1>年龄：{{age}}</h1>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false;//关闭生产提示
            let person = {
                name:"张三",
                age:18,
            };

            const vm = new Vue({
                el:".root",
                data:person,
            });

            console.log(person);
            console.log(vm._data);
            console.log(vm._data === person);
        </script>
    </body>
</html>

posted on 2021-08-11 23:16  敖胤  阅读(84)  评论(0)    收藏  举报