vue data变量相互赋值后被实时同步的解决步骤

数据结构是这样子的

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的指向了！