[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找不到原来的节点去更新数据了。
[Vue源码分析]谷歌翻译后,Vue双向数据绑定失效了?相关推荐
- VUE源码解析-1- 初始篇:vue定义路径查找
从这里开始,记录VUE源码分析. 1. 将 vue 源码拉到本地,方便分析 vue 源码地址来自 全球最大同性交流网站-- gitHub:https://github.com/vuejs/vue 我们 ...
- [Vue源码分析] 模板的编译
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: Vue有两个版本:Runtime + Compiler . Runtime only ,前者是包含编译代码的版本,后者不包含编译代码,编 ...
- [Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件:子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实 ...
- [Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎 ...
- 大前端-Vue源码分析
Vue源码解析-响应式原理 以下内容来自 拉勾教育大前端训练营 笔者在学习过程中对笔记进行的一个整理 心得体会 嘿嘿嘿~~~ 首先说说拉勾教育大前端训练营的课程视频吧,课程的质量是真的很好哦,并且已经 ...
- 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源码分析:渲染篇
这篇文章是2017年5月份作者大大写的,快一年了,写得很好,多看看.我们现在用的也是vue2.0,可以从源码中深入理解一下vue是如何渲染页面和渲染过程以及原理. 转载于https://blog.cs ...
最新文章
- 出道即巅峰,掀起AI领域巨浪的GPT-3来啦
- Boost:是否支持sse2指令的测试程序
- 一个服务器多个网站多个域名,多个域名一个服务器吗
- SSM框架笔记11:Spring常用配置与高级话题
- 不是书评 :《我是一只IT小小鸟》
- tf.read_file和tf.image.decode_jpeg处理图片(转)
- 全局替换资源_BitLocker+VHD替换TrueCrypt及其后继VeraCrypt
- 没有项目经验,如何书写漂亮的简历?
- scrapy-redis爬取豆瓣电影短评,使用词云wordcloud展示
- 引入echarts 报错xAxis “0“ not found
- C语言字节对齐规则总结
- 清华大学2020年“姚班”“智班”报考指南及选拔方案发布!
- oracle表空间 online,表空间的ONLINE和OFFLINE状态
- java pdf 签名_java – PDFBox 1.8.10:填充和签名PDF生成无效签名
- linux中raid扩容,Linux停软Raid1扩容方案
- Python 二维数据
- 宜信实时数据平台介绍
- mysql学生班级老师_MySQL全方位练习(学生表 教师表 课程表 分数表)
- Netty(八) Netty心跳检测机制
- android开发歌词滑动效果_Android 歌词同步滚动效果
热门文章
- E: Unable to lock the administration directory (/var/lib/dpkg/)
- 【原】Linux设备网络硬件管理
- 【NetApp】ROOT VOLUME NOT WORKING PROPERLY: RECOVERY REQUIRED
- jQuery-DOM操作之属性、class
- 《C++游戏编程入门(第4版)》——1.11 问题讨论
- 2016 ACM/ICPC Asia Regional Dalian Online
- MySQL5.7绿色版安装
- 6.22软件工程总结
- memmove() -- 拷贝内存内容
- Android中使用HttpClient实现HTTP通信效果