Vue — 数据代理 Object.defineProperty

张美丽呀

已于 2022-05-28 17:14:14 修改

阅读量543

点赞数

分类专栏： Vue 文章标签： javascript 前端框架

于 2022-04-21 12:26:32 首次发布

本文链接：https://blog.csdn.net/slient033/article/details/124316877

版权

本文详细探讨了Vue中数据代理的概念，利用`Object.defineProperty()`实现数据绑定的原理。通过设置setter和getter，实现了数据驱动视图，确保属性改变时能自动更新视图。数据代理流程包括创建实例、数据存储、属性代理以及属性修改的响应式处理。同时，提到了`Object.defineProperty()`的特点，如不可遍历、不可修改和不可删除。

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

五、Object . defineProperty() 特点

一、定义：

通过一个对象，代理对另一个对象data中属性的操作（读/写）。目的是为了更方便操作data中的数据

二、语法：

Object.defineProperty(obj, prop, descriptor)

第一个参数 obj，表示被添加（特性）的对象

第二个参数 prop，表示添加的属性

第三个参数 descriptor，表示要定义或修改的属性值

Object.defineProperty（）可以为属性添加特性，每一个被添加过的属性，都会拥有属于自己的getter和setter。正是有了getter和setter，可以实现数据驱动视图，数据实时绑定的效果。

示例：

  let obj1 = { name: "kubo" };
  let obj2 = { age: 20 };

  // 为obj2添加新特性name
  Object.defineProperty(obj2, "name", {
    // 当obj2的name值被读取时,调用get函数
    get() {
      // 返回obj1的数据
      return obj1.name;
    },

    // 当obj2的