Summary

Propose a new template syntax for creating local variable bindings with reactive references, similar to Vue's v-slot but more straightforward for simple variable aliasing.

Motivation

When working with deeply nested reactive objects or when we want to create local aliases for reactive data, current solutions either require script setup variables or slot syntax. A more direct syntax in template could improve code readability and reduce boilerplate.

Proposed Syntax

<template v-def="sourceData => localName">
 <!-- localName is now a reactive reference to sourceData -->
</template>

Example Usage

<script setup>
import { ref } from 'vue'
const data = ref({user: {name: 'Tom', age: 18}})
</script>
<template>
 <template v-def="[data.user,userInfo]">
 <input v-model="userInfo.name" />
 <input type="number" v-model="userInfo.age" />
 </template>
</template>

Benefits

1. More intuitive syntax for creating local variable bindings
2. Maintains reactivity
3. Supports two-way binding
4. Reduces the need for script setup variables when only template scoping is needed
5. Similar to JavaScript arrow function syntax, making it familiar to developers

Current Alternatives

Currently, developers need to either:

1. Create computed properties in script setup
2. Use v-slot syntax
3. Use toRefs in script setup

Questions for Discussion

1. Is this syntax intuitive enough?
2. Should this be a built-in feature or remain as a custom directive?
3. Are there potential edge cases we should consider?
4. How would this interact with TypeScript type inference?

Looking forward to the community's thoughts and feedback on this proposal.