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中对应的属性

相关推荐
Asort11 分钟前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手14 分钟前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码14 分钟前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码15 分钟前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高00718 分钟前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴18 分钟前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong18 分钟前
JavaScript逆向之反制无限debugger陷阱
前端·javascript
skykun19 分钟前
今天你学会JS的类型转换了吗?
javascript
Lotzinfly20 分钟前
8 个经过实战检验的 Promise 奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
小桥风满袖40 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript