关于一次开发过程中所遇到的问题的总结

前言：这是我之前自己整理在本地给自己看的一个小结，所以排版上比较差，请包涵。水平有限，如果有问题交流讨论或是指出不足，欢迎在下方评论交流。

第一个遇到也是困扰最久的问题

Vant的Card组件在数量改变后不会主动刷新，为此浪费了很多时间，绕了很大的圈子，原本使用的是强制刷新，虽然这种方法不够优雅，但事实上这原本应该是最终的解决方案，如果不是后来的右滑刷新无法同步刷新的话。经过搜索得出最终的我心中的完美解决方案。

遇到的问题描述	Vant的Card组件在数量改变后不会主动刷新，即商品数量已经改变，但是页面上并没有改变，组件没有重新渲染
引发问题的原因	在右滑删除无法调用刷新方法来强制刷新组件来应用改变时，只好抛弃原有方法，在搜索过程中也发现了引起此问题的原因。 因为商品数量是以一个数组来储存的，而此处使用了v-for，理所当然地使用了索引作为下标从数组中获取数据，即而通过上图可知，Vue不能 检测到以上两种类型的数组内数据变动，而我原来的做法为++或--，都是Vue无法检测到的变动。
最终的解决方案

接下来遇到的问题算是第一个问题引起的并发症

遇到的问题描述	Vant的Card组件在添加和删除商品等强制刷新时，会使得页面浏览位置改变，即弹回页面顶部等影响用户使用体验的问题
引起这个问题的原因	具体原因不明，但是按照调试过程的观察发现总结为，在页面长度不满百分之100时，强制刷新Card组件导致浏览位置发生变化
最终解决方法	最早的解决方法是在页面底部放置空白的块，使得页面长度超过百分之100。在第一个问题解决后事实上这个问题也自动解决了，不需要强制刷新Card组件，只是自动重新渲染组件，所以不再出现浏览位置改变的情况

一个不算BUG的问题吧，但是同样有记录价值

此处的orders是store中的全局对象

此处直接使用v-model来绑定orders对象中的属性，可以实现数据双向绑定


此处以name为例，name是同样是来自store的全局对象，但是直接使用v-model是无效的，修改的数据无法被写入，因此需要以上图方式来定义set函数回调store中的函数来修改，以此实现数据双向绑定

为了使页面具有一致性

在App.vue 的html选择器中添加了min-height：100vh，以此保证每个页面长度都能填满页面

关于页面底部留白的问题

因为Vant的submitBar组件有遮罩层，这会导致页面最后一些地方被遮住无法看到或者进行操作

解决方法：在相关页面底部添加一个高度为10vh的空白块进行占位

关于刷新路由跳转的问题

因为两步为不同页面，因此在第二个页面刷新时需要重定向到第一个页面，于是上网搜索，找到一个方法，

这里引用搜索到的网图，因为我的代码已经修改，在本地测试的时候未发现问题，但部署到服务器后发现问题。

遇到的问题描述	需要点击两次提交按钮才能跳转至第二页，但是这种情况在刷新一次后即消失，便于下文描述，因此定义第一个页面为A，第二个页面为B
引起这个问题的原因	因为vue 的生命周期还没有怎么学习过，因此这里的原因分析出自我多次测试后总结的。 首先关于点击两次才能进行跳转的问题的个人分析：第一次点击的时候创建了对应组件B，即原本的跳转目标组件，此时调用了B（该组件）的created方法，进行了一次判断，并且返回A（第一页）。而第二次点击时，因为B（目标组件）在第一次点击按钮时已经被创建，所以不会触发B的created方法，因此可以正常跳转。 关于为什么刷新之后此问题自动消失的个人分析:刷新时首先进入B（当前页面），调用了B（当前页面）的created方法，进行判断后跳转至A（第一个页面），此时虽然页面跳转，但B组件已经创建成功，所以在A（第一个页面）点击跳转时，并不会触发B的created
最终解决方案	在A跳转时发送一个参数用于标记，说明此时是从A跳转至B 在B的created的方法中进行修改，需要验证enter是否为true，即是否从A跳转至B，如果是则不进行重定向，并且将enter修改为false，以便刷新时能进行重定向，尽管不够优雅，但不失为一个解决方法