本帖最后由 liven001 于 2020-3-2 18:50 编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
</head>
<body>
<h1>全局 "reactive"对象在组件"computed"函数中用到后,不会跟随组件销毁而释放内存,从而导致内存溢出</h1>
<div id="app"></div>
<script>
Vue.use(vueCompositionApi.default);
// 1, 创建一个全局共享reactive对象
const store = vueCompositionApi.reactive({
list: new Array(100000).fill('').map((_, index) => {
return {
index
}
})
})
// 2,在"Item"组件中的"computed"函数里面使用到全局共享reactive对象
const Example = {
template: `<div>{{ls.length}}</div>`,
setup() {
return {
ls: vueCompositionApi.computed(() => store.list)
}
}
}
// 3, 在"App"组件上通过"toggle"按钮不停的创建销毁"Item"组件
// 然后你会发现你的内存不停的增长,新增的内存并不会随"Item"组件的销毁而销毁
const App = {
components: {Example},
template: `
<div>
<button @click="show = !show">toggle</button>
<example v-if="show"></example>
</div>`,
setup() {
return {
show: vueCompositionApi.ref(false)
}
}
}
new Vue({
el: '#app',
render: h => h(App)
})
</script>
</body>
</html>
| 
发表于 2020-3-2 17:35
|
发表于 2020-3-2 18:51
