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

世上无难事,只畏有心人。有心之人,即立志之坚午也,志坚则不畏事之不成。

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  470 随笔 :: 0 文章 :: 22 评论 :: 30万 阅读
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

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

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

  1. Vue中的数据代理,通过vm对象来代理data对象中属性的操作(读写)
  2. Vue中数据代理的好处,更改方便的操作data种的数据
  3. 基本原理:
    • 通过Object.defineProperty()把data对象中所有属性添加到vm上;
    • 为每一个添加到vm上的属性,都指定了一个getter/setter方法
    • 在getter/setter内部去操作data对应中的属性。

 代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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> 

 示例二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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   sunwugang  阅读(13)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
点击右上角即可分享
微信分享提示