记录一下稀奇古怪的问题---Vue

chrome F12手机测试
先上个图

1. v-if切换不同div时,两个div里面的input的值,会被放到另一个上面;我没有双向绑定,绝对没有
   原因:
   因为两者的data-v-id是同一个,底层的双向数据劫持,就把他们两的value变成同一个了,所以是我懒没有做更细致的子组件,贼难受
   原理
   v-if和v-show的本质区别
   if不满足条件的时候,元素容器及其子元素都不出现在DOM数上
   show只是加了一个display:none的样式
   所以当不出现在DOM树上时,从上往下input的时候是第一个,切换之后还是第一个但是他们本身的组件没有卸载,所以内部存储的数据没有销毁,所以改成v-show让两者id不一样之后,就可以实现切换了,但是为了下面这个很迷的问题,我还是做成了两个子组件,用子路由控制
   2.还是上面的后续,用一个文本@touchend事件控制v-if的变量的时候,会点击到切过来的第三个input,
   我本来是以为前面两个被顶掉了,所以第三个聚焦了,后来发现点最边上的时候,是不会聚焦的,然后我就觉得是,双重点击,但是我明明用的是touchend,理应松开之后才触发,触发之后,第三个input才会出现,为什么会直接来了第二次
   原因:不清楚,手机端也测过了,反正是触发了两次,反正做出子组件之后屁事没有
   并没有,我发现换成click之后是没事的,但是touchend之后就是有问题,我就觉得是这个事件本身有问题,然后在文档里找到了一个.prevent阻止事件重载页面,这样就解决了,按照方法来讲,就是我end之后触发坐标在哪里,然后事件随着页面重载了,然后继而触发了在同位置上的input的聚焦