feat(reactivity): introducing persistent Dep

[OnlyWick]

Fixes: #12924.

<script setup>
import { ref, reactive } from 'vue'

const msg = ref('Hello World!')
function getTestData1() {
  const data = reactive({}); // The issue lies in the fact that each function execution will create a new {}.
  console.log('use in operator', 'label' in data); // Then this will create Dep Links without limits.
  data.label = 'set data after in';
  return data;
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
  <div>{{ getTestData1() }}</div>
</template>

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@12942

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@12942

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@12942

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@12942

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@12942

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@12942

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@12942

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@12942

@vue/shared

npm i https://pkg.pr.new/@vue/shared@12942

vue

npm i https://pkg.pr.new/vue@12942

@vue/compat

npm i https://pkg.pr.new/@vue/compat@12942

commit: 5216d8c

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (+72 B)	38.1 kB (+30 B)	34.3 kB (+20 B)
vue.global.prod.js	158 kB (+72 B)	58 kB (+33 B)	51.6 kB (-5 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.6 kB (+72 B)	18.3 kB (+37 B)	16.7 kB (+34 B)
createApp	54.6 kB (+72 B)	21.3 kB (+35 B)	19.5 kB (+38 B)
createSSRApp	58.9 kB (+72 B)	23.1 kB (+31 B)	21 kB (+22 B)
defineCustomElement	59.5 kB (+76 B)	22.9 kB (+34 B)	20.9 kB (+23 B)
overall	68.7 kB (+72 B)	26.5 kB (+29 B)	24.1 kB (+42 B)

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	✅ success	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	❌ failure	❌ failure
vuetify	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[OnlyWick]

The core of this problem is that every time the function is re-executed, a new object is created, which cannot hit the proxyMap cache. Subsequently, when triggers perform dep.track , they also fail to hit the depsMap cache, resulting in a large number of dep links being generated. To address this issue, we need to avoid creating new objects each time. Unfortunately, this cannot be achieved with the current implementation architecture.

<script setup>
import { ref, reactive } from 'vue'

const msg = ref('Hello World!')
const obj = {}  // Avoid recreating objects
// or
// const data = reactive({});
function getTestData1() {
  const data = reactive(obj);
  console.log('use in operator', 'label' in data);
  data.label = 'set data after in';
  return data;
}
</script>