Vue核心基础1:数据代理

1 回顾Object.defineProperty方法

javascript 复制代码
let str = 'hello'
const person = {
     name: '张三',
     age: 18
}

javascript 复制代码
Object.defineProperty(person, 'sex', {
     // value: '男',
     // enumerable: true, // 控制属性是否可以枚举,默认值是false
     // writable: true, // 控制属性是否可以被修改,默认值是false
     // configurable: true, // 控制属性是否可以被删除, 默认为false

     // 当有人读取person的sex属性时,get函数就会被调用,且返回值就是sex的值
     // get: function () {
     //     return str
     // }
     get() {
          return str
     },
     set(value) {
          // 当有人修改person的sex属性时,set函数就会被调用,且会收到修改的具体值
          console.log('有人修改了sex属性,且值是', value)
          str = value
     }
})

javascript 复制代码
console.log(person)
console.log(Object.keys(person))   // enumerable: true
person.sex = '女'  // writable: true
console.log(person)

2 何为数据代理

通过一个对象代理对另一个对象中属性的操作(读/写)

以下代码就是通过obj2来代理obj :

javascript 复制代码
    <script>
        let obj = {
            x: 100
        }
        let obj2 = {
            y: 200
        }
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            }
        })
        console.log(obj2.x); // 100
        obj2.x = 300
        console.log(obj.x); // 300
    </script>

3 Vue中的数据代理


总结:

  1. Vue中的数据代理:

通过vm对象来代理data中的属性的操作 (读/写)

2.Vue中数据代理的好处:

更加方便地操作data中地数据

3.基本原理:

通过Object.defineProperty()把data中所有属性添加到vm上,

为每一个添加到vm上的属性,都指定一个 getter和setter,

在getter/setter内部去操作data中对应的属性

相关推荐
顽疲3 分钟前
从零用java实现 小红书 springboot vue uniapp(13)模仿抖音视频切换
java·vue.js·spring boot
开开心心就好35 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子10 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js