- 父组件
<template>
<child v-if="show"/>
<button @click="show = !show">test</button>
</template>
<script>
export default {
data() {
return {
show: false,
}
}
}
</script>
- 子组件
<template>
<div>child组件</div>
<div>{{list.join(',')}}</div>
<button @click="add">增加数组项</button>
</template>
const _data = {
list: []
}
export default {
data() {
return {
list: [],
}
},
mounted() {
this.list = _data.list
},
methods: {
add() {
_data.list.push(111)
}
}
}
</script>
我在子组件定义一个变量_data,并增加数据项111,然后点击test按钮v-if销毁组件,再点击test显示child组件,结果看到_data数据还是添加了111。我猜是内存泄漏的问题,想了解下原理,同时想问下如果在vue组件中使用了类似这种_data的自定义变量如何防止内存泄漏,谢谢!
相当于调用该组件的都可以用到的全局变量。如果你不需要,就包在data里面。