#What is the use of name in Vue3?

1. You need to define the name when recursing the component

2. You can cache the component with keep-alive include exclude

3. You can do this when Vue reports an error or is debugging See the component's name

Vue3 definition name

1. Automatically generate

<script setup></script> As long as script Turning on the setup syntax sugar mode single file component will automatically generate the corresponding name option based on the file name, such as Tree.vue Then his name It is automatically generated by Tree. There is a drawback to this. If you want to modify name, you need to modify the component name. If there is a place import, the component needs to be modified together.

2. Open a script to define the name

Advantages: You can define the name at will. Disadvantages: Two scripts appearing in a single file component will make people confused.

<template>
<div></div>
</template>

<script lang="ts" setup>
import {ref,reactive } from &#39;vue&#39;
</script>

<script lang=&#39;ts&#39;>
 export default {
    name:"XXX"
 }
</script>

<style lang="less" scoped>

</style>

3. Use the third-party plug-in unplugin-vue-define-options

Installation methodnpm i unplugin-vue-define-options -D

vite Use

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

to configure tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

Usage method by compiling macro defineOptions Add name and inheritAttrs

<script setup lang="ts">
defineOptions({
  name: &#39;Foo&#39;,
  inheritAttrs: false,
})
</script>

4. Personal thoughts: Isn’t it good to define the name directly in the script?

<template>
<div></div>
</template>

<script name="xiaoman" lang="ts" setup>
import {ref,reactive } from &#39;vue&#39;
</script>


<style lang="less" scoped>

</style>

This matter was also discussed intensely in the Vue community, and You Da also responded

You Da thinks this idea is good, but has some concerns. When we use components, we need to define name and inheritAttrs. The situation is very rare. Most component library developers may often use these two things, but for 90% of applications For components, it's really a different set of trade-offs, and dealing with props is going to be cumbersome, and coupled with the complexity of the implementation, I'm not sure it's worth it.

But there is already a plug-in that implements this function unplugin-vue-setup-extend-plus

Let’s copy a simple version. The principle is to add a script, but Developers cannot see this script

Vue3 setup supports name plug-in implementation ideas, learn from the above plug-in

import type { Plugin } from 'vite'
//@vue/compiler-sfc 這個(gè)插件是處理我們單文件組件的代碼解析
import { compileScript, parse } from '@vue/compiler-sfc'

export default function setupName(): Plugin {
    return {

        name: 'vite:plugin:vue:name',
        //一個(gè) Vite 插件可以額外指定一個(gè) `enforce` 屬性
        //（類似于 webpack 加載器）來(lái)調(diào)整它的應(yīng)用順序。`enforce` 的值可以是`pre` 或 `post`
        //加載順序?yàn)?          //Alias
          //帶有 `enforce: 'pre'` 的用戶插件
          //Vite 核心插件
          //沒有 enforce 值的用戶插件
          //Vite 構(gòu)建用的插件
          //帶有 `enforce: 'post'` 的用戶插件
         //Vite 后置構(gòu)建插件（最小化，manifest，報(bào)告）
        enforce: "pre",
        //transform code參數(shù)就是我們寫的代碼比如vue代碼  id就是路徑例如/src/xx/xx.vue
        transform(code, id) {
            //只處理vue結(jié)尾的文件
            if (/.vue$/.test(id)) {
                let { descriptor } = parse(code)
                //通過compileScript 處理script 返回result
                  //attrs: { name: 'xm', lang: 'ts', setup: true },
                  //lang: 'ts',
                  //setup: true,
                const result = compileScript(descriptor, { id })
                //attrs 此時(shí)就是一個(gè)對(duì)象
                const name = result.attrs.name 
                const lang = result.attrs.lang
                const inheritAttrs = result.attrs.inheritAttrs
                //寫入script
                const template = `
                <script ${lang ? `lang=${lang}` :  &#39;&#39;}>
                 export default {
                    ${name ? `name:"${name}",`  : &#39;&#39;}
                    ${inheritAttrs ? `inheritAttrs: ${inheritAttrs !== &#39;false&#39;},` : &#39;&#39;}
                 }
                </script>
                `;
                //最后拼接上這段代碼 也就是我們加的script這一段 返回code
                code += template;
               // console.log(code)
            }

            return code
        }
    }
}

, and then introduce the plug-in we wrote in vite config ts

Tree.vue child component

<template>
    <div v-for="item in data">
        {{ item.name }}
        <xm v-if="item?.children?.length" :data=&#39;item?.children&#39;></xm>
    </div>
</template>

<script name=&#39;xm&#39; lang="ts" setup>
import { ref, reactive } from &#39;vue&#39;
defineProps<{
    data: any[]
}>()
</script>

App.vue parent component

<template>
    <TreeVue :data="data"></TreeVue>
</template>

<script lang="ts" setup>
import TreeVue from &#39;./components/Tree.vue&#39;;
const data = [
    {
        name: "1",
        children: [
            {
                name: "1-1",
                children: [
                    {
                        name: "1-1-1"
                    }
                ]
            }
        ]
    }
]
</script>

The component was successfully recursed

The above is the detailed content of How to add name to setup in Vue3. For more information, please follow other related articles on the PHP Chinese website!