Vue 源码 set、delete 源码解析

前端

2023-12-21 18:00:23

Vue 响应式系统概述
Vue.js 是一个流行的前端框架，它以响应式系统而闻名。响应式系统允许您在数据发生变化时自动更新 UI。这使得开发人员能够轻松地构建动态和交互式的应用程序。

Vue 的响应式系统基于以下几个关键概念：

响应式对象： 响应式对象是指能够自动追踪和响应其属性变化的对象。
数据绑定： 数据绑定是指将响应式对象中的数据与 UI 元素关联起来。当响应式对象中的数据发生变化时，UI 元素将自动更新。
计算属性： 计算属性是指根据响应式对象中的数据计算得出的值。计算属性也是响应式的，当其依赖的数据发生变化时，它将自动更新。

set 和 delete 方法概述

set 和 delete 是 Vue 中用于操作响应式对象的方法。

set 方法： set 方法用于向响应式对象中添加新的属性或修改现有属性的值。
delete 方法： delete 方法用于从响应式对象中删除属性。

set 方法的源码解析

set: function set(target, key, value) {
  if (isUndef(key)) {
    return this;
  }
  if (process.env.NODE_ENV !== 'production' && (isReservedKey(key) || isStaticKey(key))) {
    warn$2("Cannot set reactive property on undefined, null, or reserved key: '" + key + "'");
  }
  if (hasOwn(target, key)) {
    target[key] = value;
    return value;
  }
  const ob = target.__ob__;
  if (!ob) {
    target[key] = value;
    return value;
  }
  defineReactive$1(ob.value, key, value);
  ob.dep.notify();
  return value;
},

set 方法的源码相对简单，它首先对 key 进行一些检查，以确保它是有效的。然后，它检查 target 对象中是否存在 key 属性。如果存在，则直接修改其值。如果不存在，则根据 target 对象是否有 ob 属性来决定如何操作。如果没有 ob 属性，则直接将值设置到 target 对象上。如果有 ob 属性，则调用 defineReactive$$1 方法来将 key 添加到响应式对象中。最后，调用 dep.notify() 方法来通知所有订阅者数据发生了变化。

delete 方法的源码解析

delete: function del(target, key) {
  if (process.env.NODE_ENV !== 'production' && !hasOwn(target, key)) {
    warn$2("Attempting to delete nonexistent property on target object: '" + key + "'");
  }
  if (hasOwn(target, key)) {
    delete target[key];
  }
  const ob = target.__ob__;
  if (!ob) {
    return;
  }
  ob.dep.notify();
},

delete 方法的源码也相对简单，它首先对 key 进行一些检查，以确保它是有效的。然后，它检查 target 对象中是否存在 key 属性。如果存在，则直接删除它。如果不存在，则直接返回。如果有 ob 属性，则调用 dep.notify() 方法来通知所有订阅者数据发生了变化。

使用场景

set 和 delete 方法在 Vue 开发中有很多使用场景，以下是一些常见的场景：

动态添加或修改响应式对象中的属性： 您可以使用 set 方法来动态添加或修改响应式对象中的属性。当您使用 set 方法修改响应式对象中的属性时，UI 元素将自动更新。
动态删除响应式对象中的属性： 您可以使用 delete 方法来动态删除响应式对象中的属性。当您使用 delete 方法删除响应式对象中的属性时，UI 元素将自动更新。
构建动态表单： 您可以使用 set 和 delete 方法来构建动态表单。当用户在表单中输入数据时，您可以使用 set 方法将数据添加到响应式对象中。当用户删除表单中的数据时，您可以使用 delete 方法从响应式对象中删除数据。

注意事项

在使用 set 和 delete 方法时，需要注意以下几点：

只能对响应式对象使用 set 和 delete 方法： set 和 delete 方法只能对响应式对象使用。如果您尝试对非响应式对象使用这些方法，则不会有任何效果。
set 和 delete 方法不会触发 computed 属性的更新： set 和 delete 方法不会触发 computed 属性的更新。如果您需要更新 computed 属性，则需要手动调用 computed 属性的 getter 方法。
set 和 delete 方法可能会导致性能问题： 如果您频繁地对响应式对象使用 set 和 delete 方法，则可能会导致性能问题。这是因为 Vue 需要追踪响应式对象的每个属性的变化，这可能会消耗大量的资源。

总结

set 和 delete 是 Vue 中用于操作响应式对象的方法。set 方法用于向响应式对象中添加新的属性或修改现有属性的值，delete 方法用于从响应式对象中删除属性。这两种方法在 Vue 开发中有很多使用场景，但需要注意的是，只能对响应式对象使用这些方法，并且频繁地使用这些方法可能会导致性能问题。