Vue3 setup添加name的方法步骤

目录

• Vue3中name有什么用呢？
• Vue3 定义 name
• 1.自动生成
• 2.在开启一个script用来定义name
• 3.使用第三方插件 unplugin-vue-define-options
• 4.个人想法 我想着直接在script 定义name 不好吗？
• Vue3 setup 支持 name 插件实现 思路借鉴上面插件
• 总结

Vue3中name有什么用呢？

1.在递归组件的时候需要定义name

2.配合keep-alive include exclude 可以缓存组件

3.在Vue有报错或者调试的时候可以看到组件的name

Vue3 定义 name

1.自动生成

3.使用第三方插件 unplugin-vue-define-options

安装方法 npm i unplugin-vue-define-options -D

vite 使用

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

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

配置tsconfig.json

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

使用方法 通过编译宏 defineOptions 添加name 和 inheritAttrs

4.个人想法 我想着直接在script 定义name 不好吗？

这件事情在Vue社区也是进行了激烈的讨论，而尤大也是做出了回复

大致意思就是：尤大觉得这个构思很好，但是有一些担忧，在我们使用组件的时候需要定义name 和 inheritAttrs 情况非常罕见，大部分组件库的开发人员可能经常会使用这两个东西，但对于90%的应用程序组件来说，这确实是一组不同的权衡，并且处理props将会变得很麻烦，再加上实现的复杂性，不确定做这件事是否值得。

不过已经有一个插件实现该功能 unplugin-vue-setup-extend-plus

我们来复刻一个简易版 其原理还是加一个script 只不过开发人员看不到了这个script

Vue3 setup 支持 name 插件实现 思路借鉴上面插件

import type { Plugin } from 'vite'
//@vue/compiler-sfc 这个插件是处理我们单文件组件的代码解析
import { compileScript, parse } from '@vue/compiler-sfc'

export default function setupName(): Plugin {
    return {

        name: 'vite:plugin:vue:name',
        //一个 Vite 插件可以额外指定一个 `enforce` 属性
        //（类似于 webpack 加载器）来调整它的应用顺序。`enforce` 的值可以是`pre` 或 `post`
        //加载顺序为
          //Alias
          //带有 `enforce: 'pre'` 的用户插件
          //Vite 核心插件
          //没有 enforce 值的用户插件
          //Vite 构建用的插件
          //带有 `enforce: 'post'` 的用户插件
         //Vite 后置构建插件（最小化，manifest，报告）
        enforce: "pre",
        //transform code参数就是我们写的代码比如vue代码  id就是路径例如/src/xx/xx.vue
        transform(code, id) {
            //只处理vue结尾的文件
            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 此时就是一个对象
                const name = result.attrs.name 
                const lang = result.attrs.lang
                const inheritAttrs = result.attrs.inheritAttrs
                //写入script
                const template = `
                
                `;
                //最后拼接上这段代码 也就是我们加的script这一段 返回code
                code += template;
               // console.log(code)
            }

            return code
        }
    }
}

然后在vite config ts 引入我们写好的插件

Tree.vue 子组件

App.vue 父组件

组件成功递归出来

总结

到此这篇关于Vue3 setup添加name的文章就介绍到这了,更多相关Vue3 setup添加name内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！