Vue学习——数据代理

最新推荐文章于 2024-09-06 22:20:29 发布

王猪精也

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量103

点赞数

分类专栏： Vue学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44734398/article/details/121637799

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的Object.defineProperty方法，包括基础配置项、getter和setter的使用。此外，还探讨了数据代理的概念，通过示例展示了如何通过代理对象操作另一对象的属性。在Vue框架中，数据代理是实现响应式数据绑定的关键，它使得操作data中的属性更加便捷。文章阐述了Vue中数据代理的基本原理和好处。

摘要由CSDN通过智能技术生成

一、Object.defineProperty方法

Object.defineProperty用来给对象定义属性，用这个方法定义的属性比较灵活。

1. Object.defineProperty的基础配置项

let per = {
  name: 'rj',
  country: '中国'
}

// 使用Object.defineProperty方法给per对象添加一个属性
Object.defineProperty(per,'age',{
  value: '18',  //配置新增属性的值
  enumerable: true, //控制属性是否可以被枚举，默认为false
  writable: true, //控制属性书否可以被修改，默认为false
  configurable: true  //控制属性是否可以被删除
})

2. getter和setter

当属性被访问时，getter就会被调用
当属性被修改时，setter就会被调用

let number = 18
let per = {
  name: 'rj',
  country: '中国'
}

// 使用Object.defineProperty方法给per对象添加一个属性
Object.defineProperty(per, 'age', {
  //可简写为 get(){}
  get: function () {
    console.log('有人读取age了~');
    return number
  },
  //有人修改age属性时，setter会被调用
  set(value){
    console.log('有人修改age了！')
    number = value
  }
})

二、数据代理

1. 什么是数据代理

通过一个对象代理对另一个对象中的属性进行操作（读/写）。

let obj = {x:100}
let obj2 = {y:200}

// 通过obj2来操作obj的x属性
Object.defineProperty(obj2,'x',{
  get(){
    return obj.x
  },
  set(value){
    obj.x = value
  }
})

三、Vue中的数据代理

Vue中的数据代理：通过vm来代理data中属性的操作
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()方法将data中的属性添加到vm身上。
为每个添加到vm身上的属性指定getter和setter。
在getter和setter内部操作data的属性。