谷歌翻译影响vue_[Vue源码分析]谷歌翻译后，Vue双向数据绑定失效了？

前言：

最近运营反馈了一个问题：谷歌浏览器打开第三方储值平台，使用谷歌浏览器自带的翻译功能后，选择商品没有计算总额。

首先可以肯定的是这不是bug，这个平台已经兼容了13种语言，只是运营没有通过语言栏切换语言，而是通过谷歌翻译。

当初想到的方法禁止谷歌浏览器翻译当前页面，如下：(已采用)

但站在技术的角度来说，看看为什么还是有必要的，储值平台基于Vue，计算总额应用了双向数据绑定；为什么谷歌翻译后，Vue双向数据绑定失效？真的是失效了吗？接下来我们以最简单的例子还原案发现场，顺便解读一下这部分相关Vue源码。

问题重现

如下图，实现简单的双向数据绑定，name初始化为test：

刷新浏览器，将当前页面翻译成中文，如下图：

翻译后再次输入，下边没有更新输入的内容。

源码分析

首先自信地排除这是业务代码的bug，然后我们自信地看看框架相关部分的源码。

浏览器翻译前

可以看到，浏览器翻译前，当输入新的数据，这个文本节点的新旧虚拟DOM会进行对比；text不一样时会执行setTextContent方法，如下如所示。

setTextContent负责在值有变化时，把对应的值赋值给对应dom节点的textContent

执行完这步后，此时节点的textContent就变成了Your name is test1

浏览器翻译后

刷新浏览器恢复初始化数据，右击翻译后开始调试。

1)翻译后，DOM结构有什么变化？

可以看到谷歌翻译后，dom节点自动添加了标签，如图：

2)setTextContent是否还有执行？

经调试发现此方法仍有执行，并且text是正常的。

结论：问题出在传进来的node，node是旧虚拟DOM对应的真实DOM，由于翻译导致DOM结构发生了变化，在执行node.textContent = text前，这个node已经不存在了。

验证

如果结论正确，那么到node.textContent = text前，结果都还是符合预期的，我们给vue源码增加一句代码，把这个找不到了的DOM节点重新挂载到文档中，如下箭头所示：

运行结果：

输入test1，虽然谷歌翻译的那段没变化，但document.body.appendChild(node)得到了想要的结果，控制台访问一下data中的name，也是有更新的。

再试试数据驱动，也还可行：

快速地敲一敲，也行得通：

从这个角度来说，谷歌浏览器翻译后，Vue双向数据绑定其实并没有失效，只是翻译导致DOM结构发生了变更，Vue找不到原来的节点去更新数据了。

谷歌翻译影响vue_[Vue源码分析]谷歌翻译后，Vue双向数据绑定失效了？相关推荐

[Vue源码分析]谷歌翻译后，Vue双向数据绑定失效了？
前言: 最近运营反馈了一个问题:谷歌浏览器打开第三方储值平台,使用谷歌浏览器自带的翻译功能后,选择商品没有计算总额. 首先可以肯定的是这不是bug,这个平台已经兼容了13种语言,只是运营没有通过语言栏 ...
VUE源码解析-1- 初始篇：vue定义路径查找
从这里开始,记录VUE源码分析. 1. 将 vue 源码拉到本地,方便分析 vue 源码地址来自全球最大同性交流网站-- gitHub:https://github.com/vuejs/vue 我们 ...
[Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎 ...
[Vue源码分析] 模板的编译
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: Vue有两个版本:Runtime + Compiler . Runtime only ,前者是包含编译代码的版本,后者不包含编译代码,编 ...
[Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件:子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实 ...
vue源码分析系列二：$mount()和new Watcher()的执行过程
续vue源码分析系列一:new Vue的初始化过程在initMixin()里面调用了$mount() if (vm.$options.el) {vm.$mount(vm.$options.el);/ ...
Vue源码分析——第三章
Vue源码分析--第一章 Vue源码分析--第二章 // only used in dev mode//检测 val必需是数字function checkDuration(val, name, vno ...
Vue源码分析--Vue.component
Vue源码分析–Vue.component 我将非 Vue.component 的部分去掉了 export function initAssetRegisters (Vue: GlobalAPI) { ...
大前端-Vue源码分析
Vue源码解析-响应式原理以下内容来自拉勾教育大前端训练营笔者在学习过程中对笔记进行的一个整理心得体会嘿嘿嘿~~~ 首先说说拉勾教育大前端训练营的课程视频吧,课程的质量是真的很好哦,并且已经 ...
vue源码分析：渲染篇
这篇文章是2017年5月份作者大大写的,快一年了,写得很好,多看看.我们现在用的也是vue2.0,可以从源码中深入理解一下vue是如何渲染页面和渲染过程以及原理. 转载于https://blog.cs ...

谷歌翻译影响vue_[Vue源码分析]谷歌翻译后，Vue双向数据绑定失效了？

谷歌翻译影响vue_[Vue源码分析]谷歌翻译后，Vue双向数据绑定失效了？相关推荐

最新文章

热门文章