fix(runtime-core): do not warn Symbol.unscopables access

[Ilanaya]

Fixes #7910
Related #1731, #2910 comment

Explanation:

Generated render function uses with statement to wrap its contents in some conditions. Example:

As _ctx is a Proxy inside with statement it, on the first time, traps access to Symbol.unscopables and only then the actual property. You can see that ProxyHandlers get Symbol.unscopables as the key on the screenshot below:

To reproduce these steps you can place a debugger in the warning message in the Stackblitz reproduction.

Why this should be fixed

This warning is unrelated to user code and makes lots of noise when a compiled template has a lot of proxy property access

StackBlitz Reproduction

Simple HTML page reproduction:

Test.html

<script src="../../dist/vue.global.js"></script>
<script src="../../../compiler-dom/dist/compiler-dom.global.js"></script>

<div id="demo">
</div>

<script>
  Vue.createApp({
    setup() {
      const inlineTemplateString = `<div> {{ state.text }} </div>`;
      const { code } = VueCompilerDOM.compile(inlineTemplateString);

      return new Function('Vue', code)(Vue);
    },
    computed: {
      state() {
        return {
          text: 123,
        };
      },
    },
  }).mount('#demo');
</script>  

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11283

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11283

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11283

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11283

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11283

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11283

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11283

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11283

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11283

vue

pnpm add https://pkg.pr.new/vue@11283

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11283

commit: 03ea8ff

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	101 kB (+33 B)	38.1 kB (+8 B)	34.2 kB (+21 B)
vue.global.prod.js	160 kB (+33 B)	58 kB (+7 B)	51.6 kB (+49 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	49.1 kB (+33 B)	18.9 kB (+16 B)	17.3 kB (+10 B)
createApp	55.7 kB (+33 B)	21.4 kB (+14 B)	19.6 kB (-33 B)
createSSRApp	59.7 kB (+33 B)	23.2 kB (+18 B)	21.1 kB (+28 B)
defineCustomElement	60.5 kB (+33 B)	23 kB (+11 B)	21 kB (+71 B)
overall	69.4 kB (+33 B)	26.5 kB (+14 B)	24.2 kB (+88 B)

[edison1105]

for more details see #2910 (comment)