Add v-def directive (增加v-def指令)

[gme-gpl]

Use v-def can simplify code in template when use a conflict nest object

使用 v-def 可以在模板中使用复杂的嵌套对象时简化代码

Current (当前的写法)

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

const veryVeryVeryFamousBook = reactive({
  name: {
    english: 'just a book',
    chinese: '非凡的书',
  },
  content: {
    start: {
      type: 'sad',
      description: 'nobody like this',
    },
    end: {
      type: 'happy',
      description: 'everyone is happy'
    },
  },
})
</script>

<template>
  <h3>Book</h3>
  <h4>name: {{ veryVeryVeryFamousBook.name.english }} {{ veryVeryVeryFamousBook.name.chinese }}</h4>
  <h5>start: {{ veryVeryVeryFamousBook.content.start.type }} {{ veryVeryVeryFamousBook.content.start.description }}</h5>
  <h5>end: {{ veryVeryVeryFamousBook.content.end.type }} {{ veryVeryVeryFamousBook.content.end.description }}</h5>
</template>

Hopeful (希望的写法)

<template>
  <h3>Book</h3>
  <h4 v-def="{ name: BN } = veryVeryVeryFamousBook">{{ BN.english }} {{ BN.chinese }}</h4>
  <template v-def="{ content: { start, end } } = veryVeryVeryFamousBook">
    <h5>start: {{ start.type }} {{ start.description }}</h5>
    <h5>end: {{ end.type }} {{ end.description }}</h5>
  </template>
</template>

[Justineo]

See vuejs/core#7218

[gme-gpl]

Thank you