背景

项目中一个列表页面，出现一个bug：表格数据进行筛选后未进行刷新，但是查看network可以看到接口是正常返回了的，也就是视图数据未进行刷新，好生奇怪

分析

发现不管怎么切换筛选项，列表数据都不进行刷新，一直展示第一次渲染的数据，我自己的电脑无法出现
刚开始猜测是否是缓存的问题，结果测试切换成无痕之后，确实是好的，所以测试把非无痕浏览器进行缓存清空，结果还是一样的，判定多半跟是否是无痕没关系

之后又重新部署了一遍测试环境，问题仍然存在

后来我发现测试电脑自动进行了谷歌翻译，带着怀疑的态度切换成英文后，问题没有了，然后我又切换成中文，问题又出现了，问题定位了！谷歌翻译导致了页面不刷新！！！

翻译前：

  1. <div class="cell">
  2.   <div data-v-da78699>xxx</div>
  3. </div>

翻译后：

  1. <div class="cell">
  2.   <div data-v-da78699>
  3.     <font style="vertical-align: inherit;">
  4.       <font style="vertical-align: inherit;">xxx</font>
  5.     </font>
  6.   </div>
  7. </div>

去百度看了看，发现确实存在这样的问题，原因是因为谷歌翻译导致数据渲染的时候找不对对应的dom节点，所以节点就没有更新！

解决

在index.html添加了meta属性，如果是Google，则不进行翻译

  1. <!-- 如果是Google浏览器，则禁止翻译 -->
  2. <meta name="google" content="notranslate">

加上这个meta后，谷歌浏览器上面的右侧不会出现翻译的按钮
也可以修改项目的语言
image.png
但是用户其实还可以右键选择翻译网页，经过多次切换后，同样会有这样的问题

image.png
解决方案就是给你不想进行翻译的容器上加上一个类即可，这种情况下，用户就算右键点击了翻译，页面也不会有问题

  1. class="notranslate"

image.png