vue3 类组件装饰器模式配置

2024年10月31日

vue3 支持装饰器模式插件

借助插件vue-facing-decorator实现类组件装饰器转换

npm install --save-dev vue-facing-decorator @rollup/plugin-babel @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

vite.config.ts配置

// 第一种 支持装饰器模式逻辑与模版写在同一个tsx文件内一起解析
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vueJsx({
      babelPlugins: [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
      ]
    }),
  ]
})

// 第二种 支持装饰器模式逻辑与模版分离 进行解析
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    babel({
      babelHelpers: 'bundled',
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
      plugins: [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
      ]
    })
  ]
})

配置详解

两种配置对应的组件文件情况如下：

// 第一种 
// Comp.tsx
import { Component, toNative } from "vue-facing-decorator"

function render () {
  return <></>
}

@Component({
  render
})
class Comp extends Base {}

export default toNative(Comp)

// 第二种 
// Comp.render.tsx
import { Component, toNative } from "vue-facing-decorator"

export default function render () {
  return <></>
}

// Comp.ts
import { Component, toNative } from "vue-facing-decorator"
import render from "./Comp.render.tsx"

@Component({
  render
})
class Comp extends Base {}

export default toNative(Comp)

第二种tsx文件命名方式要重命名为Comp.xxxx.tsx，否则会报错，暂不知是何原因？

注意事项

1. 由于是类，使用此种模式尤其要注意this的指向问题
2. 涉及响应式赋值时，如果从this中解构类属性，插件转换后将失去响应性