資料結構是這樣子的

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變數相互賦值後被實時同步的解決步驟就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。