剖析Vue源码之数组与$set：揭示高阶数据变更的奥秘

揭秘$set：Vue数组变更的幕后英雄

在Vue中，$set方法扮演着数组变更的幕后英雄角色。它是一个高阶函数，可以高效、安全地修改数组中的元素，同时触发响应式更新。

$set方法的定义如下：

export function set(target: object, key: string | number, value: any): void;

该方法接收三个参数：

• target：要修改的数组或对象
• key：数组的下标或对象的键名
• value：要设置的新值

如果target是一个数组，并且key是一个合法的下标，$set方法将调用数组的splice方法来修改数组。

if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.splice(key, 1, value)
  return
}

isValidArrayIndex函数用于检查key是否是一个合法的数组下标。

function isValidArrayIndex(val: any): boolean {
  const n = parseFloat(String(val))
  return n >= 0 && Math.floor(n) === n && isFinite(val)
}

如果target是一个对象，$set方法将直接修改对象的属性值。

if (hasOwn(target, key)) {
  target[key] = value
  return
}

$set方法的优势

$set方法在Vue中具有以下优势：

• 高阶函数： $set是一个高阶函数，可以高效、安全地修改数组中的元素。它简化了数组变更的操作，避免了直接操作数组带来的潜在问题。
• 响应式更新： $set方法可以触发响应式更新，使数据变更能够被Vue框架感知并自动更新视图。这简化了数据管理和视图渲染的过程，提高了开发效率。
• 虚拟DOM渲染： $set方法在修改数组时，会触发虚拟DOM的重新渲染。这确保了视图与数据的一致性，提高了应用的性能和稳定性。

$set方法的应用场景

$set方法在Vue中有着广泛的应用场景，包括：

• 数组元素添加： 通过$set方法可以向数组中添加新的元素。

const arr = []
this.$set(arr, 0, 'item 1')
this.$set(arr, 1, 'item 2')

• 数组元素修改： 通过$set方法可以修改数组中现有元素的值。

const arr = ['item 1', 'item 2']
this.$set(arr, 0, 'new item 1')

• 数组元素删除： 通过$set方法可以从数组中删除元素。

const arr = ['item 1', 'item 2']
this.$set(arr, 1, null) // 删除数组中的第二个元素

• 数组长度修改： 通过$set方法可以修改数组的长度。

const arr = ['item 1', 'item 2']
this.$set(arr, 2, 'item 3') // 添加新的元素，扩展数组长度
this.$set(arr, 1, null) // 删除数组中的元素，缩短数组长度

总结

set方法是Vue中一个强大的工具，它可以高效、安全地修改数组中的元素，同时触发响应式更新和虚拟DOM渲染。set方法在Vue中有着广泛的应用场景，包括数组元素添加、修改、删除和长度修改等。通过掌握$set方法的使用，我们可以更加熟练地管理Vue中的数据，构建出更加动态和响应式的应用。