小白使用 vue2.6.10 的 v-for 遇到的一个问题从而引发了一个对于这一行业的思考,希望有人可以开导我

我遇到的问题是这样的,我描述下:

问题 1:

父组件使用"props"传递一个数组"items"给子组件,

子组件使用 v-for 处理这个"items"来循环打印"item"中的 content 字段内容,

过了一段时间后,我会去触发一次父组件的 items 更新,类似如下代码:

```
this.items = this.items.concat([{id:11, content: "第十一条通知"}])
```

因为 vue 官方文档说过,如果是非变异方法改变数组内容,直接使用"replace a array"的方式,也就是我上面的方式.

所以我认为我的代码是没问题的.

但是事实却痛击了我, 不知道为啥 v-for 循环并没有刷新数据.

于是我先使用{{items}}检查了 props 的数据是否已经更新.

结果是{{items}}确实已经更新了第十一条通知的内容进去.

并且我使用 slice 方法去更新数组内容,是可以的, 就唯独 concat 方法不行

问题 2:

问题 2 是我在问题 1 后出现的一个新问题.

我将{{items}}放到了 v-for 所在组件的后面(问题 1 中我是放在最前面验证的), 这时候神奇的事情发生了.

v-for 居然更新了内容.

所以 vue 内部到底发生了什么... 我该怎么去解... 文档我也上下翻了好几次, google,baidu 了类似问题,但是很遗憾没有和我遇到一样问题的伙伴出现

问题 3:

我依旧不服, 想着在单元测试中也试试会不会存在这个问题,

所以我使用 vue-cli 创建了一个超级简单的 vue 单组件项目作为我的单元测试项目, 然后我将一些核心代码移了过去,重新测试了下

(我强调下, 单元测试的代码肯定是和我真正项目中用的是一样的! )

结果是没有任何问题, v-for 工作完全正常!

我.................................................................................

总结:

到最后, 我没法搞定这个问题(我采用的是问题 2 中描述的折中但是非常不优雅的写法), 感觉内心非常的难受, 关电脑, 回宿舍, 简单的吃了下晚饭, 吃着吃着差点掉眼泪 , 感觉写代码也至少一年多了, 这类问题以前在使用 jsp 的时候其实也遇到过类似的. 结果,一年过去了, 我连这种问题都没法搞定, 还谈什么设计模式,算法呢, 一年来感觉压根没有多大提升, 除了找资料和看英文文档能力感觉比以前强了以外, 能做的无非只有 crud.

这么一个问题, 搞得我焦头烂额,浪费了一下午+晚上几个小时的青春. 我想真诚的问下各位前辈们, 是不是我这种人不适合做程序员

zazalu

2019-08-09 03:01:34 +08:00

问题解决了,虽然我不知道为啥(写程序以来, 第一次彻底放弃思考了 ,以前的问题我一般都会刨根问底的)

我就改了一个地方,就一切正常了.不会出现唯独 concat 方法不会触发 v-for 更新的问题, 如下

在我主题中说的子组件中其实还套用了另一个组件,叫 new-message, 我在其外围包裹了一个 div 后, v-for 的功能突然就一切正常了, 不会变得稀奇古怪的.

```
<template>
<div>

<p v-for="item in messageItems" :key="item.id">{{item.content}}</p>

<div> 
<new-message ref="newMessage" @on-success-valid="handleNewMessage"></new-message>
</div>

</div>
</template>

<script>
export default {

props: {
messageItems: {
type: Array
}
},

//.....

}

</script>

```

---------------

顺便回复下楼上一些好心大佬的回答:

1. 我使用 push 也不会触发更新
2. 我检查了 key 是否重复,随后我故意重复发现 vue 会报错,也证明了我数据应该没有问题
3. 用 this.data = [] this.data = res 这种语法赋值会触发更新, 我已经说了,是唯独 concat 函数去更新不会触发 v-for 的更新

--------------

总结:

第一次对 vue 产生了心理阴影, 也怪我不想看源码(实际上是太菜看的慢,一知半解=不懂, 所以只能不停的测试测试测试)

睡了, 让我自闭会

libook

2019-08-09 08:50:51 +08:00

楼主的目的在于抱怨，但其他 V 友在尝试帮楼主解决问题。

所以楼主干脆把完整代码发上来？可以存到 Github 上面然后发个链接出来。

我自己带实习生的时候，总是要求他们遇到问题先尝试自己解决，但如果两个小时仍然没有实质进展的话，再继续抠下去也没有多大帮助，这时候就需要提问，问身边的人或者去 StackOverflow 等社区提问，你英语好的话用英文提问应该没压力吧？实在罕见的问题去框架官方 GIthub 上提 issue。如果用的东西实在冷门，连官方都无暇回复，也可以自己研究源代码。

上面这段实际上就是程序员的日常，没有人生来就能解决所有问题，但不应该拒绝学习。