背景：近期项目中，有小伙伴通过数组的forEach方法修改列表的属性值，视图并未更新。

之前小伙伴一直使用forEach进行同类操作，屡试不爽。

这次突然不灵了，小小的脑袋有大大的问号。

对于长期使用数组的map方法的我，并未遇到视图不更新的问题，我不李姐。

使用forEach和map方法，视图更新情况如何？为了彻底搞懂这个问题，下面用一个demo（一个列表的增删改）来验证视图更新情况。

一：Demo

代码准备

<!--template-->
<div v-for="item in list" :key="item.id">{
   
   {item}}</div>
<div class="active-btn" @click="btnClick">btn</div>

<div>{
   
   {textForHtml}}</div>

<script>
// data
list: []
textForData: '', // 只在data中定义
textForHtml: '', // data中定义 且应用到页面中

created () {
  this.textForMethods = '' // 仅在methods 中使用
  this.initDate()
}

// methods
initDate () {
  // 通过定时器模拟ajax获取数据
  setTimeout(() => {
    const list = [
      {id: 0, title: 'title0'},
      {id: 1, title: 'title1'},
      {id: 2, title: 'title2'},
      {id: 3, title: 'title3'}
    ]
    this.list = list
  }, 200)
}

1、新增列表项

结论：

利用数组索引—失效
利用数组push方法—有效
利用数组unshift方法—有效
利用数组splice方法—有效
利用数组concat方法—有效
利用扩展运算符...—有效
利用Vue.set—有效
利用vm.$set—有效

代码运行结果截图：

方式	结果
索引
push
unshift
splice
concat
扩展运算符...
Vue.set
vm.$set

2、删除列表项

结论：

利用数组长度—失效
利用数组splice方法—有效
利用数组pop方法—有效
利用数组shift方法—有效

代码运行结果截图：

扫描二维码关注公众号，回复： 14859957 查看本文章

方式	结果
数组长度
splice
pop
shift

3、修改属性值—纯修改

结论：

利用直接索引—有效
利用for循环—有效
利用数组forEach—有效
利用map方法获取索引—有效

方式	结果
直接
for forEach
map

4、新增属性—纯新增

4.1 利用索引—失效

方式	结果
直接
Object. assign
Object. assign

4.2 利用for循环获取索引—失效

方式	结果
直接
Object. assign
Object. assign

4.3 利用forEach/map获取索引，仅修改列表项—失效

方式	结果
直接
Object. assign
Object. assign 修改item
Object. assign 修改下标值
...
直接
Object. assign
Object. assign 修改item
Object. assign 修改下标值
...

4.4 利用map方法生成新数组—有效

方式	结果
直接
Object. assign
Object. assign

由上可知，

直接使用索引，间接获取索引（本例：for循环，forEach、map【仅修改列表项】方式），新增属性操作（形式不限），结果一致，均失效。
map方法生成新数组方式，均生效。

既然直接使用索引，间接获取索引（本例：for循环，forEach、map【仅修改列表项】）结果一致，下面用forEach方法为代表探讨哪种方式可以使视图更新？

二：forEach方式探讨

序号	结果
1	新增列表项 + 修改一个非data中的值—失效
2	新增列表项 + 修改值【只在data中定义】—失效
3	新增列表项 + 修改值【data中定义且应用到页面中】—生效
	新增列表项 + 不修改值【data中定义且渲染到页面中，原值不变】—失效
4	新增列表项 + 修改列表项—生效
	新增列表项 + 不修改列表项【原值不变】—失效
5	新增多个列表项—失效
6	新增列表项【Vue.set】—生效
7	新增列表项【vm.$set】—生效