前言：

最近運營反饋了一個問題：谷歌瀏覽器打開第三方儲值平臺，使用谷歌瀏覽器自帶的翻譯功能后，選擇商品沒有計算總額。
首先可以肯定的是這不是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双向数据绑定失效了？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。