[Vue源码分析]谷歌翻译后,Vue双向数据绑定失效了?

前言:

最近运营反馈了一个问题:谷歌浏览器打开第三方储值平台,使用谷歌浏览器自带的翻译功能后,选择商品没有计算总额。
首先可以肯定的是这不是bug,这个平台已经兼容了13种语言,只是运营没有通过语言栏切换语言,而是通过谷歌翻译。
当初想到的方法禁止谷歌浏览器翻译当前页面,如下:(已采用)

<meta name="google" content="notranslate">

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

问题重现

如下图,实现简单的双向数据绑定,name初始化为test:
在这里插入图片描述
在这里插入图片描述
刷新浏览器,将当前页面翻译成中文,如下图:
在这里插入图片描述
翻译后再次输入,下边没有更新输入的内容。
在这里插入图片描述

源码分析

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

浏览器翻译前

可以看到,浏览器翻译前,当输入新的数据,这个文本节点的新旧虚拟DOM会进行对比;text不一样时会执行setTextContent方法,如下如所示。
在这里插入图片描述在这里插入图片描述
setTextContent负责在值有变化时,把对应的值赋值给对应dom节点的textContent
在这里插入图片描述
执行完这步后,此时节点的textContent就变成了Your name is test1
在这里插入图片描述

浏览器翻译后

刷新浏览器恢复初始化数据,右击翻译后开始调试。
1)翻译后,DOM结构有什么变化?
可以看到谷歌翻译后,dom节点自动添加了<font></font>标签,如图:
在这里插入图片描述
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找不到原来的节点去更新数据了。

©️2020 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值