computed on a shared reactive causes a memory leak #270
Description
<!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>
<div id="app"></div>
<script>
Vue.use(vueCompositionApi.default);
//1. Create a globally Shared reactive object
const store = vueCompositionApi.reactive({
list: new Array(100000).fill('').map((_, index) => {
return {
index
}
})
})
// 2.Use the global Shared reactive object in the "computed" function in the "Item" component
const Example = {
template: `<div>{{ls.length}}</div>`,
setup() {
return {
ls: vueCompositionApi.computed(() => store.list)
}
}
}
// 3, On the "App" component, use the "toggle" button to continuously create and destroy the "Item" component
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>Keep clicking the toggle button, you will find that the memory keeps increasing and will not be destroyed.
