Vue视图未更新再次踩坑
原文首发地址：https://github.com/Daotin/fe-blog/issues/
你也可以从下面地方找到我：
今天遇到一个Vue数据更新了，但是视图未更新的问题，折腾了我2小时才搞定，有必要记录下来，防止日后再次踩坑。
问题描述
我需要显示一个列表，而且列表是可编辑的。比如可以修改列表每一项的名称等。
我从后端获取列表后，对其中的每一项数据进行初始化，增加一个editing 可编辑属性。
me.groupList.forEach(item=>{
item.editing = false;
});
之后在模板中使用v-for遍历groupList，然后每个item增加一个icon，点击icon后，修改editing的状态，根据editing的状态显示item的名称或者input标签。
但是在我操作的时候，发现使用Vue.set 也无法使得页面更新，加上this.$forceUpdate() 之后才可以。
menuEdit(menu) {
this.$set(menu, 'editing', true);
console.log('edting----->', menu.editing); // 可以打印出来数据已经更新
// this.$forceUpdate(); // 加上视图才会更新
},
按照以往的经验，只有直接赋值的时候editing=false，才会数据更新，但是视图未更新，但是我现在已经使用了this.$set 了，为何还是如此？
于是只能借助搜索引擎了。
在网上搜寻的过程中，我发现了有人问，为什么数据更新了，但是Vue Devtools中的数据未更新？
链接如下：
- https://stackoverflow.com/questions/43838363/why-doesnt-the-data-get-updated-in-vue-dev-tools
- https://stackoverflow.com/questions/46606499/vuejs-why-this-data-property-doesnt-updated-on-click-event-in-dev-tools
- https://github.com/vuejs/vue-devtools/issues/41#issuecomment-162675083
其实，如果页面上没有任何可响应的内容，也就是页面未使用响应式的数据，或者使用了非响应式的数据，那么数据将无法在Vue Devtools中实时更新，但是你可以点击工具的刷新按钮，这时候可以看到数据进行了更新。
小插曲完。
问题解决
就在我一筹莫展的时候，我突然发现，最开始初始化的时候的editing 是直接赋值的，我当时一个激灵就知道，问题就在这里。
me.groupList.forEach(item=>{
this.$set(item, 'editing', false);
});
改成上面代码后，问题迎刃而解。
总结
- 问题是个小问题，也是我知道的问题。只是没想到它在最根源的地方犯了错，后面即使正确操作，也是于事无补。
- 要相信，当使用
this.$forceUpdate()的时候，99%的情况都是自己错了。 - 如果页面未使用响应式的数据，或者使用了非响应式的数据，Vue DevTools的数据是不会更新的。
