數據結構是這樣子的

data() { return { title: ’web前端 this data變量相互賦值后被實時同步問題’, val_1: ’vue’, val_2: ’’ }}

問題源：

我們在onload()把val_1 賦給 val_2 (或者在用戶click時更改也都會出現這個問題)

onload() { this.val_2 = this.val_1;}

解決方法：

我們在通過JavaScript把 “val_1” 轉換成字符串類型，再JSON.parse，最后再賦給 “val_2” 就解決了

onload() { this.val_2 = JSON.parse(JSON.stringify(this.val_1));}

補充知識：vue定義的全局變量在一個方法賦值過后在另一個方法中是空

在學習vue的過程中，發現了許多小的問題，例如：我定義一個全局變量a，為了可以在下面定義的方法中一直取得到這個全局變量，在方法中我添加了一個jquery的click方法，在這個方法里面用this.a = b(自定義的一個變量)；然后到另一個方法中去使用這個全局變量a，發現根本沒有進行賦值，還是原來的全局變量的值。

原因如下：因為click函數使this的指向發生了變化。所以要在click函數的外面添加一句：

var self = this;

然后在click函數里面為全局變量賦值要寫：

self.a = b;

這樣就不會改變this的指向了！

以上這篇vue data變量相互賦值后被實時同步的解決步驟就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。