今天使用vue在开发的时候遇到一个问题 具体可以看 https://segmentfault.com/q/1010000010041611
看了别人的回答，感觉收获很大，所以来写一下自己的理解。
从数据结构、后台减压、<template>这几点来说
列表已经通过table做出来了，需要的进一步功能是在“查看详情”的点击事件中请求回该条数据的详细情况，且一次只显示一条反馈的详情，把数据放在data中的一个currentMsg对象中（只存放当前请求回来的数据），然后在该行追加一个tr并将相应的内容填充进去，
当时困惑的是如何能够以vue数据驱动视图的方式追加详情行，因为如果用js操作dom来做的话肯定没问题，但是在vue里面这样做就很low了，过不了自己这关，然后就在sf上面提了这个问题，看了boxsnake的回答之后有一种茅塞顿开的感觉，
数据结构
这个可以说是通用的了，不仅仅是针对前端，因为一个良好的结构化数据可以很好的优化程序的结构，让别人更容易理解，
就这个历史反馈功能来说，后端给了我2个请求的接口，一个是根据当前用户获取该用户提交的所有反馈（allTitleInfo）的摘要信息，结构如下：
我也是按照这样的结构把数据填充到页面中的，另一个接口就是根据ID获取反馈的详情，
当时想的是增加一个变量currentInfo，点击查看详情请求数据之后把当前数据覆盖到currentInfo，然后在页面中渲染出来。 后来想了想：每次都要重新重新请求，不管是否请求过该条数据。
后台减压
对于用户反馈来说，这可以算是一个错误的算法，因为首先用户反馈的信息总量不大，完全可以在allTitleInfo中新增一个detail对象，请求之后就把该数据添加到其中，这样就通过判断当前反馈中是否存在减少了后续的请求。
并且，这样以id作为一组存放数据后，比单独增加一个currentInfo查找想要的数据更快，比如说原来的复杂度是O(1) + O(1)，现在就变成了O(1)。
来看下优化后的allTitleInfo：
<template>
现在来说说vue里面的template，这个标签就类似我在 VUE2.0+VUE-Router做一个图片上传预览的组件 中提到的router-link一样，并没有实际的html意义（类似于一个意念盒子，反之div、section等是实体盒子）
图1渲染出来的方式是通过在tr中v-for遍历，类似下图：
既然已经把detail添加到里面了，肯定要在页面中把他体现出来（使用v-if达到不渲染占位的目的）
接下来来看用template如何做：
v-if通过判断item.detail是否为空来决定渲染新增的tr，v-show通过判断currentIndex是否等于当前的index是否展示该tr，至于currentIndex的改变就可以放在“查看详情”的单击事件中了。
至此，这个功能算是完成了，放一张项目里面的效果图
分类: JavaScript
http://www.cnblogs.com/lonhon/p/7119042.html
延伸阅读
- 投入六个月的经历，收获了整个人生 2023-04-18 10:18:55.813
- 一个人的坚持就是胜利 2023-04-18 10:02:06.86
- 一步一个脚印 2023-04-18 09:24:45.927
- 有问题就会有答案 2023-04-15 14:14:16.593
- 在万码学堂有所改变，有所收获 2022-07-17 14:34:41.653
- 我的第一份工作 2022-07-13 15:18:25.697
- 这是一个我很喜欢的地方——万码学堂 2022-07-12 15:53:35.84
- 在万码学堂有所改变，有所收获 2021-11-16 15:14:15.323
- 我的第一份工作 2022-02-07 14:05:08.76
- 做项目的收获 2021-05-19 10:19:16.643
投入六个月的经历，收获了整个人生