this.$set详解

this.$set(this.currentImages, index, this.navLinks[index].hoverImg);

这行代码使用了 Vue 提供的 $set 方法来更新数组中的特定元素。具体来说，它将 currentImages 数组中指定索引位置的元素设置为新的图片路径（悬停状态下的图片路径）。

为了确保这些变化能被 Vue 检测到并触发视图更新，Vue 提供了 $set 方法。

• this.$set：这是 Vue 提供的一个方法，用于在响应式对象或数组中添加新属性或修改现有属性，并确保这些变化能够被 Vue 的响应式系统检测到。

• index：这是当前操作的导航链接的索引，表示你要更新 currentImages 数组中的哪一个元素。

  为什么需要使用 $set

  Vue 的响应式系统通过拦截对对象和数组的操作来实现数据绑定和视图更新。然而，某些操作不会触发视图更新：

• 直接修改数组元素：
  • 直接通过索引修改数组元素（如 this.currentImages[index] = newValue）不会触发视图更新。
• 添加新属性到对象：
  • 直接向对象添加新属性（如 this.someObject.newProperty = value）也不会触发视图更新。

$set 方法的工作原理

$set 方法的签名如下：

vm.$set(target, propertyName/index, value)

 

• target：目标对象或数组。
• propertyName/index：要添加或修改的属性名或数组索引。
• value：新的值。