Vue数据代理

2021/8/11 23:36:20

编程Tag： vue 数据代理属性 data Person VM obj0

本文主要是介绍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中的数据代理：

通过vm对象，来代理data对象中的属性的操作。
更方便的操作data中的数据。
通过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>

这篇关于Vue数据代理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Vue数据代理

相关编程文章