Vue.js如何直接更新嵌套属性？替代array.reduce()的方案

嘿，这个问题我之前写Vue项目的时候也琢磨过！其实完全没必要非得用array.reduce这种技巧，针对固定的嵌套属性路径，有好几种更直观的实现方式，我给你梳理一下：

1. 直接赋值（最省心的方式，前提是属性已存在） #

如果你的嵌套属性在初始化时就已经被声明在响应式对象里了，比如你的data是这样的：

data() {
  return {
    form: {
      avatar: {
        src: ''
      }
    }
  }
}

那直接写this.form.avatar.src = URL.createObjectURL(file)是完全可以生效的！Vue能检测到这个嵌套属性的变化，自动更新视图。你之前觉得这种写法不生效，大概率是因为初始化时没定义avatar.src这个属性——Vue2的响应式系统默认只能检测已声明的属性变化。

2. 用this.$set处理动态添加的属性 #

如果avatar或者src是后来才动态添加到响应式对象里的，直接赋值就会触发不了响应式更新，这时候用Vue提供的$set方法就搞定了：

// 给已有的avatar对象添加src属性
this.$set(this.form.avatar, 'src', URL.createObjectURL(file))

// 如果连avatar都不存在，先添加avatar对象
this.$set(this.form, 'avatar', { src: URL.createObjectURL(file) })

$set会帮你把新属性加入到Vue的响应式追踪系统里，确保视图能同步更新。

3. 解构重组对象（替代$set的另一种思路） #

如果你不想用$set，也可以通过返回一个新对象的方式触发更新——Vue会检测到对象引用的变化，从而更新视图：

this.form = {
  ...this.form, // 保留form里的其他属性
  avatar: {
    ...this.form.avatar, // 保留avatar里的其他属性
    src: URL.createObjectURL(file) // 更新src
  }
}

这种方式适合偏好纯JavaScript写法的同学，本质是通过浅拷贝生成新对象，避免了调用Vue的API。

什么时候才需要用reduce？ #

只有当你的属性路径是动态的（比如路径存在一个数组里，像['form', 'avatar', 'src']），这时候用reduce来遍历路径找到目标属性才是合理的。如果是固定的嵌套路径，上面的方法都比reduce更直接易懂。

内容的提问来源于stack exchange，提问作者Robo Robok