在组件中,如果在dom 中直接定义对象,所有对象似乎保存在同一个命名空间中
如果在watch中使用深度监测,则一个对象修改后,所有其它对象都监测到更改,触发watch
因此,在vue 项目中,应尽量避免直接在dom中定义对象
如:
// 父组件 <template> <div> <CountChart v-loading="loadingOne" :propsEchartData="{ data: this.countData }"/>
<FutureChart v-loading="loadingThree" :propsEchartData="{ data: this.futureData }"/>
</div> </template> // CountChart、FutureChart 组件 propsEchartData: { handler(n) { console.log("data改变") } }, deep: true, immediate: true }
此段代码中,若 countData 发生改变,则会打印两次 data改变