切换谷歌翻译语言后Vue.js实现的购物车功能失效问题咨询

谷歌翻译的核心实现逻辑是直接修改页面真实DOM的文本内容完成翻译，该操作会破坏Vue.js的响应式运行基础：Vue通过自身维护的虚拟DOM与页面真实DOM的映射关系完成数据驱动的视图更新，真实DOM被外部工具直接修改后，Vue的更新逻辑无法正常触发，就会出现操作后数据不实时更新、仅刷新页面才生效的问题，属于两者的典型兼容冲突。

• 方案1：不需要翻译Vue管控区域内容的场景，直接给Vue挂载的根DOM节点添加class="notranslate"类，该类是谷歌翻译官方指定的跳过翻译标记，谷歌翻译不会修改该节点下的内容，自然不会破坏Vue的响应式逻辑。
• 方案2：需要实现全站多语言的场景，建议放弃谷歌翻译自动整站翻译方案，改用Vue生态的国际化工具实现多语言逻辑，所有翻译操作都在Vue的响应式体系内完成，完全规避冲突。
• 方案3：必须使用谷歌翻译的场景，可以监听谷歌翻译的语言切换事件，触发后调用对应Vue实例的$forceUpdate()方法，强制Vue重新渲染视图，同步被谷歌翻译修改过的DOM状态。

内容的提问来源于stack exchange，提问作者Akhlaque Ahmed