Vue页面初始化接口发送两次请求如何解决

问题阐述

1.导致问题发生原因

在JavaScript中，浅拷贝只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，任意一个数据元素发生改变，会影响另一个；而深拷贝的两个数据指向了不同的地址，任意一个元素发生改变，不会影响另一个。
在探究浅拷贝和深拷贝之前，先来了解下堆和栈的概念
堆和栈都是内存中划分出来用于存储的区域。栈（stack）为自动分配的内存空间，它由系统自动释放；堆（heap）则是动态分配的内存，大小不定也不会自动释放

1.看一下页面中是否有watch监听，如果有，一般是由于watch中被调用了两次接口导致重复请求接口导致的数据重复或多次请求接口

解决方案

方法一

加锁判断一下

data(){
	return{
		lock: 0,
	}
}

在watch监听中，通过data中的lock变量判断，一般是接口连续请求两次，最简单的办法就是监听第一次不发送请求，到第二次才发送请求。

代码实现

watch: {
		countHeight: function (data) {
			if (data) {
				this.lock+= 1
				if (this.lock>= 2) {
					this.函数名()
				}
			}
		}
	}

方法二

2.watch中的参数用了deep属性，，浅拷贝导致指向同一个内存地址，父组件传递一次值子组件watch执行两次，导致出现数据重复bug
在JavaScript中，浅拷贝只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，任意一个数据元素发生改变，会影响另一个；而深拷贝的两个数据指向了不同的地址，任意一个元素发生改变，不会影响另一个。

解决方案
使用JSON.parse(JSON.stringify(n))进行深拷贝，这样修改的时候data不会再被修改，watch不会再被监听，就避免接口连续请求两次的问题了
JS深拷贝，在这里普及一下JS的深拷贝和浅拷贝的区别
在JavaScript中，浅拷贝只是复制了原数据的内存地址，相当于两个数据指针指向了相同的地址，任意一个数据元素发生改变，会影响另一个；而深拷贝的两个数据指向了不同的地址，任意一个元素发生改变，不会影响另一个。所以合理运用JS深拷贝，就能解决多条数据指向的是同一个内存地址，修改其中一条数据相当于修改了所指内存的值，导致每条数据都改变导致的数据污染问题

代码实现

JSON.parse(JSON.stringify(n))