在组件中,如果在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改变

posted on 2022-01-15 17:01  occc  阅读(531)  评论(0)    收藏  举报