VUE3中的@Options，是做什么的

<script lang="ts">
// lang="ts" 可以使用ts
import { ref } from "vue";
import { Options, setup, Vue } from "vue-class-component";
import ImgCanvas from "./components/ImgCanvas.vue";

@Options({
  components: {
    ImgCanvas,
  },
})
export default class App extends Vue {}
</script>

和之前的@component装饰器一个作用，用来标识这个Typescript类是一个vue组件

在@options装饰器中可以填写vue组件内包含的属性

@Options({

    data(){
        return{
            flag: 1
        }
    }
})

export default class App extends Vue{
    public flag:number = 2 // 这里的flag会把修饰器中声明的覆盖掉 class中的声明优先级高于修饰器
    // 你也可以很方便的声明一个method
    public hello(){
        console.log("hello world");
    }

}

可以再给你一个例子

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{flag}}</h2>
    <h2>{{initVar}}</h2>
    ...
  </div>
</template>
...

<script lang="ts">
import {Options, prop, Vue} from 'vue-class-component';

@Options({
  props: {
    msg: String
  },
  data(){
    return{
      flag: "这是一个欢迎组件"
    }
  }
})
export default class HelloWorld extends Vue {
  msg!: string;
  flag!: string;
  public initVar!: string;

  public mounted(): void{
    alert("挂载成功")
    this.initVar = "测试"
  }
}
</script>

补充一下在class内部声明变量直接

public initVar = ""

就行了，不需要声明类型

大括号是部分映入，看样子像是引了个组件？？？

后里写，这vue3 ts版本我是真的看不懂啊

https://blog.csdn.net/sigeo/article/details/122917166