Vue篇(003)-Vue 的双向数据绑定的原理

2022-05-12 21:05:17 浏览数 (1)

答案:

VUE 实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

Vue3.0 将用原生 Proxy 替换 Object.defineProperty。

一、Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。

语法

代码语言:javascript复制
Object.defineProperty(obj,prop,descriptor)

参数

  • obj
  • 要定义属性的对象。
  • prop
  • 要定义或修改的属性的名称或 Symbol
  • descriptor
  • 要定义或修改的属性描述符。

返回值

被传递给函数的对象

在ES6中,由于 Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定义或修改不同,而Object.defineProperty 是定义key为Symbol的属性的方法之一。

Demo:

代码语言:javascript复制
const object = {};

Object.defineProperty(object, 'property', {
  value: 100,
  writable: true
});

object.property = 200;

console.log(object.property);
// output: 200

二、Proxy(代理) 是 ES6 中新增的一个特性。Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。

语法

代码语言:javascript复制
var p = new Proxy(target, handler)

参数

  • target
  • 被代理对象。
  • hander
  • 是一个对象,其声明了代理target的一些操作。

p 是代理后的对象。

当外界每次对 p 进行操作时,就会执行 handler 对象上的一些方法。handler 能代理的一些常用的方法如下:

  • get:读取
  • set:修改
  • has:判断对象是否有该属性
  • construct:构造函数
  • ...

Demo:

代码语言:javascript复制
var target = {
   value: 100
 };
 var handler = {
   get: function(target, key) {
     console.log(`${key} 被读取`);
     return target[key];
   },
   set: function(target, key, value) {
     console.log(`${key} 被设置为 ${value}`);
     target[key] = value;
   }
 }
 var p = new Proxy(target, handler);
 p.value; // 控制台输出:"value 被读取"
 console.log(target.value); // 控制台输出: 100
 p.value = 200; // 控制台输出:"value 被设置为 200"
 console.log(target.value); // 控制台输出: 200

0 人点赞