Vue2数据代理的理解

所念皆星河73

已于 2023-06-08 19:35:01 修改

阅读量503

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-06-08 19:33:04 首次发布

本文链接：https://blog.csdn.net/weixin_60664694/article/details/131114361

版权

Vue2中的数据代理通过vm实例代理data对象的属性，使用Object.defineProperty()创建setter和getter，实现读写操作并自动更新视图。这一机制简化了状态管理，提高了开发效率，并支持响应式数据更新。

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

理解

最近在复习Vue2，对于数据代理有些模糊。查阅了一些资料。

这是官方解释https://v2.cn.vuejs.org/v2/api/#data数据代理：通过代理对象操作（读/写）目标对象中的属性

这里出现了两个对象，一个叫代理对象，一个叫目标对象。

const vm = new Vue({
  data: {
    message: 'Hello, World!'
  }
});

console.log(vm.message) // "Hello, World!"

当我们在Vue实例 vm 上访问 message 属性时，实际上是通过数据代理将这个访问行为“转发”到了 vm._data 中对应的 message 属性。所以我们可以认为，Vue的数据代理就像是一个“隧道”或“管道”，通过它，我们可以方便地访问和修改Vue实例内部管理的状态。

由于Vue使用ES5提供的 Object.defineProperty() 函数为代理实现了“setter” 和 “getter” 函数，因此每次访问或修改代理属性时，Vue会自动触发重新渲染视图的操作。这也是Vue能够实现双向绑定数据更新的原因之一。

总之，Vue的数据代理机制，极大地简化了开发者对组件内部状态的管理，提高了开发效率，并且保证了页面与状态之间的同步。同时Vue还提供了其他的响应式实现方式，如利用观察者模式实现响应式数据，以满足各种高级的数据需求。

我还询问了ChatGpt，

Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：

更加方便的操作data中的数据。
基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm对象上，并且为每一个添加到vm上的属性都指定一个getter和setter，在getter、setter 内部去操作（读/写）data中对应的属性。

关注