因为疫情，五一假期不能出去玩，只好在家码字。正好昨天查了个问题，今天记录一下。问题是这样的。有一个页面包含两个组件：1个活动组件和2个搜索组件。然后在活动组件中有一个评论功能。测试同学发现切换组件后评论被清除了。问题大致是这样的。因为活动不是我做的，我只负责排错，所以我也听取其他人的反馈来分析问题。对页面感兴趣的朋友其实可以下载APP看看。维维音乐-首页轮播-五一小长假随美游如下。切换之后，UI还在，但是记录数和评论数没了。基本情况分析单页组件切换（不涉及路由或杂乱的页面通信）页面刷新无异常（因为刷新等于重新打开，重新打开没问题。）注释是公共js实现，不是Vue-基于。（重点来了）Vue注重数据驱动的视图。只要数据在，视图就okjs，jQuery讲究DOM。如果要插入节点，则节点将消失。排查常见问题这里的问题比较清楚，Vue如何使用原生库。总的来说，遇到的问题分为以下几类。无法获取DOM节点。这个一般是nextTick的问题，因为你操作完数据后，还没有渲染完。组件开发获取DOM不方便，可能会出现重复。这里我们可以使用ref来获取。排序、拖动等功能不生效。一般是外观变了，但是数据不对。因为jQuery库的思想是，DOM对了就对了，但是在Vue里，数据一定要对，然后再把数据渲染到页面上。所以处理方式一般是放弃修改DOM，改为修改数据。这个bug比较特殊，这里没有，但是也有关联（类似3中的问题）。让我们继续讨论面试问题。v-if和v-show的区别对于这个面试题并不陌生，想必大家都有答案。v-ifv-if根据表达式的值有条件地渲染元素。使用组件销毁和重建的方法。如果最初为false，则不会创建组件（不会调用生命周期挂钩）。如果一开始为true，后来改为false，此时会销毁组件（会执行destory等生命周期钩子函数）。如果后面改成true，会重新创建（会执行created等钩子函数）。v-showv-show根据表达式的值有条件地渲染元素。渲染效果是通过设置元素的displayCSS属性来实现的。true或false都会渲染组件。只是当它为false时，display:none就解决了问题。通过上面的分析，我们知道是因为v-if导致组件被销毁，然后再次渲染的时候，是按照Vue中的数据渲染的，没有DOM数据。方案一：v-show由于v-show不会被销毁，我们可以缓存v-show。这种方案的缺点是组件都是在第一次初始化的时候渲染的。会有大量的请求，无效的数据会使服务器不堪重负。因为是一开始就渲染的，如果你还没有加载完数据，就有可能报错。list&&list.length少不了这段代码的存在。方案二：切换后再调用。既然创建好了，那我们切换之后就可以再次调用初始化渲染了。这种方案的缺点是由于二次渲染的存在，jQuery等插件一般都会监听事件。所以需要注意事件不能被多次触发。还是因为之前的问题，还要注意事件引用等问题导致的内存泄露。测试DEMOhttps://www.lilnong.top/stati...补上DEMO，可以看到输入一次，四个输入都有内容。切换后，v-if下的输入丢失了值。v-show不受影响。添加keep-alive和组件测试，可以先在keep-alive组件中填写内容，然后切换，发现缺少v-if的数据。有问题也可以加我的微信前端交流群。
