Vue学习笔记10--数据代理

数据代理：通过一个对象代理对另一个对象属性的操作(读或写)

总结：data——_data(数据劫持)

Vue中的数据代理，通过vm对象来代理data对象中属性的操作(读写)
Vue中数据代理的好处，更改方便的操作data种的数据
基本原理：

通过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>数据代理</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <script type="text/javascript">
        let obj = { x: 100 }
        let obj2 = { y: 200 }
        // 注意区分大小写
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            }, set(value) {
                obj.x = value
            }
        })
    </script>
</body>

</html>

示例二：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 数据代理</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <!-- id 容器 root -->
    <div id="root">
        <h1>姓名： {{name}}</h1>
        <h1>地址： {{address}}</h1>
    </div>

</body>

</html>
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '心怡宝贝',
            address: '陕西省/西安市'
        }
    })
    console.log(vm)
</script>

posted on 2024-02-22 15:33 sunwugang 阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告