setup语法糖和原来写法的比较

之前的代码：

//defineComponent()是为了给里面的对象添加类型，服务于TS而存在的
export default defineComponent({//选项式写法
  name: "HelloWorld",
  props: { 
    msg: String,
  },
  setup() {
    const { result, loaded, loading } = useURLLoader<dogtype>(
      "https://dog.ceo/api/breeds/image/random"
    );
    return { //删了，不再需要return
      result,
      loaded, 
      loading,
    };
  },
});

改写后的代码：

<script lang="ts" setup>
import { defineProps } from "vue";
import useURLLoader from "@/hooks/useURLLoader";

interface dogtype {
  message : string;
  status: string;
}

const { result, loaded, loading } = useURLLoader<dogtype>(
      "https://dog.ceo/api/breeds/image/random"
    );
const props = defineProps({
  msg:String
})
</script>

<script lang="ts">//使用了setup语法糖后就要再弄一个script标签来定义name
export default{
  name:"HelloWorld"
}
</script>

原来的写法：

import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  }
});

新写法：
不再需要声明组件，引入后直接用

<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue';
</script>