feat: v-scope

[edison1105]

rfc: vuejs/rfcs#73
close #7201
playground

[sxzz]

It's great! I'd like to migrate it to Vue Macros for early experience.

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	ab4a415
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/63832143f2c6e80009ed5887

[Tyh2001]

This is a good idea, but the pure string method is not very friendly.

Maybe we can?

<h1 v-let.a="msg + ` Vue`">{{ a }}</h1>

[Justineo]

Shall we align the design with petite-vue (which uses v-scope and an object carrying the local variables)?

[edison1105]

Shall we align the design with petite-vue (which uses v-scope and an object carrying the local variables)?

Excellent advice. I will try it later.

[xieyuheng]

How is this PR now?

Really really really want to use petite-vue's v-scope in vue3 :)

[xieyuheng]

Is it possible to define v-scope as an user defined directive?

[xieyuheng]

Hi @edison1105, sorry to bug you ~

I want to ask, is there any timeline about when will this PR be merged?
I found myself visit this page every day,
really like this feature,
thanks for your work :)

[xieyuheng]

I care about this feature, because I recently taught a friend frontend programming.

• Our repo.

He know a little js, but almost had no experience about html, css and reactive programming.

We used alpinejs for the teaching.

With alpine's x-data, the concept about reactive data is received very well.

But actually, we want to use vue, because alpine has no good component support.

This is why I care about this feature :)

Wish v-scope be supported soon, and we can teach in vue.

[edison1105]

@xieyuheng
I'm not sure when will merge, sorry~
It needs to be discussed by the core team.

[mon-jai]

Will the language server be updated to integrate v-scope with TypeScript?

[xieyuheng]

@edison1105

I found that I can use component to do the following:

components/Scope.vue:

<script setup lang="ts">
import { reactive } from 'vue'

defineProps<{ scope: any }>()
</script>

<template>
  <slot :scope="reactive(scope)" />
</template>

Example.vue:

<Scope :scope="{ count: 1 }" v-slot="{ scope }">
  <div>{{ scope.count }}</div>
  <button @click="scope.count++">add1</button>
</Scope>

[edison1105]

@edison1105

I found that I can use component to do the following:

components/Scope.vue:

<script setup lang="ts">

import { reactive } from 'vue'



defineProps<{ scope: any }>()

</script>



<template>

  <slot :scope="reactive(scope)" />

</template>

Example.vue:

<Scope :scope="{ count: 1 }" v-slot="{ scope }">

  <div>{{ scope.count }}</div>

  <button @click="scope.count++">add1</button>

</Scope>

yep, mentioned in #7201 (comment)

[edison1105]

Will the language server be updated to integrate v-scope with TypeScript?

Not sure

[100100101]

@xieyuheng
Based on your example, made a similar component

// Scope/index.vue

<script setup lang="ts">
import { reactive } from 'vue'
</script>
<template>
    <slot :="(reactive($attrs) as any)" />
</template>

// ForExampleMemoryStat/index.vue

<script lang="ts" setup>
import Scope from '@/shared/components/Scope/index.vue'
import { MemoryInfo, useMemory } from '@vueuse/core'
const { isSupported, memory } = useMemory()
const getBToMbString = (kb: number) => `${Math.ceil(kb / 1024 / 1024)} MB`
</script>
<template>
    <Scope
        v-if="isSupported && memory"
        :="memory"
        v-slot="{
            usedJSHeapSize,
            jsHeapSizeLimit,
            totalJSHeapSize,
        }: MemoryInfo"
    >
        <div class="grid grid-cols-2 grid-gap">
            <div>usedJSHeapSize</div>
            <div>{{ getBToMbString(usedJSHeapSize) }}</div>
        </div>
        <div class="grid grid-cols-2 grid-gap">
            <div>totalJSHeapSize</div>
            <div>{{ getBToMbString(totalJSHeapSize) }}</div>
        </div>
        <div class="grid grid-cols-2 grid-gap">
            <div>jsHeapSizeLimit</div>
            <div>{{ getBToMbString(jsHeapSizeLimit) }}</div>
        </div>
    </Scope>
</template>

Instead of

// ForExampleMemoryStat/index.vue

<script lang="ts" setup>
import { useMemory } from '@vueuse/core'
const { isSupported, memory } = useMemory()
const getBToMbString = (kb: number) => `${Math.ceil(kb / 1024 / 1024)} MB`
</script>
<template>
    <template v-if="isSupported && memory">
        <div class="grid grid-cols-2 grid-gap">
            <div>usedJSHeapSize</div>
            <div>{{ getBToMbString(memory.usedJSHeapSize) }}</div>
        </div>
        <div class="grid grid-cols-2 grid-gap">
            <div>totalJSHeapSize</div>
            <div>{{ getBToMbString(memory.totalJSHeapSize) }}</div>
        </div>
        <div class="grid grid-cols-2 grid-gap">
            <div>jsHeapSizeLimit</div>
            <div>{{ getBToMbString(memory.jsHeapSizeLimit) }}</div>
        </div>
    </template>
</template>

Of course, I understand that in this example the benefit is dubious in brevity. However, it may be useful to someone and in other scenarios it will be justified.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	38 kB	34.2 kB
vue.global.prod.js	160 kB (+726 B)	58.1 kB (+239 B)	51.6 kB (+194 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.9 kB	18.3 kB	16.7 kB
createApp	55 kB	21.3 kB	19.4 kB
createSSRApp	59 kB	23 kB	20.9 kB
defineCustomElement	59.8 kB	22.8 kB	20.8 kB
overall	68.7 kB	26.3 kB	24 kB

[louiss0]

I'm glad this feature is coming

[louiss0]

I think v-scope should only be allowed in conditionals and blocks.
Allowing people to use v-scope anywhere will only allow abuse.
For that reason Svelte doesn't allow this.

I have a playground that demonstrates what I mean here.

[edison1105]

@louiss0
the current behavior aligns with https://github.com/vuejs/petite-vue#usage
There may still be changes before the merge.

[louiss0]

@louiss0 the current behavior aligns with https://github.com/vuejs/petite-vue#usage There may still be changes before the merge.

Please consider doing this change there is no point in being able to declare variables in the template with random tags. It makes code soo confusing!

[mon-jai]

@louiss0 That could be a replacement for computed variables, but the variable is declared close to where it is used to improve readability.

[pkg-pr-new]

Open in Stackblitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: facd0e8