###### 在vue中,使用组件时遇到组件的数据更新了两次,话不多说,上代码
<-- 组件 -->
<j-line myChartId='my1' :service-data="[data1, data2]" />
........
<script>
data() {
return {
data1: [...],
data2: [....]
}
}
</script>
子组件
<template>
<div :id="id"></div>
</template>
<script>
props: {
serviceData: Array
}
watch: {
serviceData(val) {
console.log("我被刷新了")
}
}
</script>
###### 这样传一个数组过来就会触发子组件这个参数被改变两次,就会触发两次watch的监听,
第一次接收到的是【新的data1,旧的data2】
第二次接收到的是【新的data1,新的data2】
我找很久才看到这个问题,把我搞麻了
###### 我老老实实的将两个参数拼成一个参数在传过去的
<-- 组件 -->
<j-line myChartId='my1' :service-data="data3" />
........
<script>
data() {
return {
data1: [...],
data2: [....],
// 大致是这个意思
data3: [data1, data2]
}
}
</script>
###### 自己记录一下,记住这个机制,避免下次踩坑