Vue中给数组对象新增属性后控制台可见但DOM无法渲染如何解决

• 核心是Vue 2的响应式机制限制：Vue 2使用Object.defineProperty实现响应式，仅会在初始化阶段给已存在的对象属性绑定getter/setter劫持，后续直接给对象新增的属性没有经过响应式处理，Vue无法监听到该属性的变化，因此不会触发DOM更新。你在控制台能看到新增的words属性，是因为控制台打印的是对象的最新引用，和DOM渲染的响应式更新逻辑无关。
• 额外的语法问题：你使用map方法但没有接收返回值，map本身是用于生成新数组的API，这种遍历修改原数组元素的场景使用forEach更符合规范。

方案1：使用Vue官方提供的$setAPI新增响应式属性 #

$set是Vue 2专门用于给响应式对象新增可监听属性的方法，能保证新增属性被纳入响应式系统，触发视图更新，修改后代码如下：

mounted(){
    this.sentences.forEach((sentence) => {
        const arrayOfWords = sentence.text.split(' ');
        this.$set(sentence, 'words', arrayOfWords)
    })
    console.log(this.sentences)
}

方案2：直接替换整个sentences数组 #

Vue可以监听到数组的整体赋值操作，你可以遍历生成带words属性的全新对象数组，直接替换原数组即可触发更新：

mounted(){
    this.sentences = this.sentences.map(sentence => ({
        ...sentence,
        words: sentence.text.split(' ')
    }))
    console.log(this.sentences)
}

方案3：Vue 3环境无需特殊处理 #

如果你的项目是Vue 3环境，Vue 3使用Proxy实现响应式，支持监听对象新增属性的操作，只需要把原代码的map替换为forEach即可正常运行：

mounted(){
    this.sentences.forEach((sentence) => {
        const arrayOfWords = sentence.text.split(' ');
        sentence.words = arrayOfWords
    })
    console.log(this.sentences)
}

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