前端頁面文字被額外添加font標簽，導致vue雙向綁定失效
問題現象描述
頁面源碼
chrome 調試element面板結果
對比源碼和調試結果我們發現，我們的文字內容“你好世界”被額外的font標簽包裹住了，而這個font標簽在我們的源碼里面是沒有的，可見這個font標簽是由瀏覽器生成的(因為我們的頁面沒有執行任何js代碼)。
細心的小伙伴可能發現啦，頁面下方還多了兩個div標簽內容，添加了id名和class名，不僅如此，html根標簽還被添加了class樣式為"translated-ltr"。通過以上幾點，作為我們問題的出發點，我們百度搜索這個id名和class名 (id="goog-gt-tt" ,class="skiptranslate")發現，最終通過百度查詢資料發現，原來這個font標簽和頁面下方多出的div兩個都是由chrome 翻譯插件生成的。
下圖所示div即為翻譯插件生成的div內容，在上面的問題截圖中我們也能看到它的身影。
如圖所示為chrome翻譯插件彈窗內容
既然我們知道了問題產生原因（由於被瀏覽器額外添加font標簽，導致dom結構和vue虛擬dom結構不一致，從而不能正確的dom），現在有以下幾種解決方案
方案一
我們將這個翻譯功能禁止掉，即將上面翻譯插件截圖中的一律翻譯按鈕取消掉
方案二
明確告訴網頁，當前頁面不需要使用翻譯功能。
因為chrome瀏覽器會檢查網頁html 的 lang 屬性（用於申明網頁內容的語言類型），當發現網頁申明語言類型（默認為en英文）和當前系統語言不同時，就會出現是否要翻譯當前網頁的插件彈窗，選擇是否要翻譯當前網頁內容。
基於這個，我們主動告知網頁內容為中文內容，那么就不會出現彈窗啦。使用如下申明
<!-- 聲明當前網頁的語言類型為中文 -->
<html lang="zh">
添加申明后，可以看到現在是正常效果啦
上面這種添加語言標識的方法有一個問題是，當系統語言不是中文的時候，依然會有翻譯提示彈窗。
方案三
當然，還有另外一種禁用谷歌翻譯插件的方法，通過添加meta字段告訴瀏覽器網頁不需要使用chrome翻譯功能。示例如下
<!-- 禁用谷歌翻譯，防止在谷歌翻譯下vue的數據綁定功能失效 --> <meta name="google" content="notranslate">