当我使用“vue-property-decorator”时，为什么代码不能工作？(Vue.js+TypeScript)

Question

我使用的是Vue.js + TypeScript，但我不明白为什么它不能与‘vue-属性装饰器’一起工作。这两条代码的目的是做同样的事情。你能帮我指出我哪里做错了吗？

此代码工作

<script lang="ts">
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
  name: "DetailPage",
  props: ["id"],
  data() {
    return {
      profile: [{}] as Array<object>
    };
  },
  methods: {
    findProfile(id?: string) {
      this.profile = [];
      axios
        .get("https://api.unsplash.com/photos/" + this.id, {
          headers: {
            Authorization: `Client-ID ${process.env.VUE_APP_MYVUE}`
          }
        })
        .then(res => {
          this.profile = res.data;
        })
        .catch(() => {
          this.profile = [];
        });
    }
  },
  watch: {
    $route(to: string, from: string) {
      this.findProfile();
    }
  },
  beforeMount() {
    this.findProfile();
  }
});
</script>

但是这个带有“vue-property-decorator”的不工作

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import axios from "axios";

export default class DetailPage extends Vue {
  @Prop() readonly id!: string;
  private profile: Array<object> = [];
  findProfile(id?: string) {
    const profile: Array<object> = []
    axios
      .get("https://api.unsplash.com/photos/"+ this.id , {
        headers: {
          Authorization: `Client-ID ${process.env.VUE_APP_MYVUE}`
        }
      })
      .then(res => {
        console.log(res.data);
      });
      
  }
  
  @Watch("$route", { immediate: true, deep: true })
  onUrlChange(to: any, from: any) {
    this.findProfile();
  }
  beforeMount() {
    this.findProfile();
  }
}
</script>

谢谢!

Answer 1

@Component装饰符指示该类是Vue组件

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import axios from "axios";

 @Component({
        name: 'ComponentName',
        components: {example, exampleTwo}
    })

export default class DetailPage extends Vue {
  @Prop() readonly id!: string;
  private profile: Array<object> = [];
  findProfile(id?: string) {
    const profile: Array<object> = []
    axios
      .get("https://api.unsplash.com/photos/"+ this.id , {
        headers: {
          Authorization: `Client-ID ${process.env.VUE_APP_MYVUE}`
        }
      })
      .then(res => {
        console.log(res.data);
      });
      
  }
  
  @Watch("$route", { immediate: true, deep: true })
  onUrlChange(to: any, from: any) {
    this.findProfile();
  }
  beforeMount() {
    this.findProfile();
  }
}
</script>