vue3中defineComponent 的作用详解

import { defineComponent } from 'Vue'
 
const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup // 没有该有的提示，这非常的不友好
}
 
export default component

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup（）{
    // setup 可接受两个参数，一个props，和 context
  }
}

export default component

import { defineComponent } from 'vue'

const component = {
  name: 'Home',
  props:{
    data: String,
  },
  setup（props, context）{
    // props.data
    // context.attrs    context.slots    context.emit 
  }
}

export default component

import {ref, Reactive, defineComponent, Ref, onMounted} from "vue";
import {settingsStore} from "/@/store/module/settings";
import {IRoleList} from "/@/interface/role/list.interface";
import {IHttpResult} from "/@/interface/common.interface";
import { ILogListParams } from "/@/interface/settings/log.interface";
export default defineComponent({
   name: "LogList",
   setup() {
       const logList: Ref<IRoleList[]> = ref([]);
       const columns = [
       	...
       ];

       const pagination = ref({
            "show-quick-jumper": true,
            total: 100,
            current: 1,
            "show-size-changer": true,
            "show-total": (total: number, range: number[]) => `${range[0]}-${range[1]} 共 ${total} 条`,
            "pageSize": 10
       });
       const columnsList = ref(columns);
       const params: ILogListParams = reactive({
           page: 1,
           pageSize: 10
       });

       onMounted(() => {
           findLogList();
       });
       
       const findLogList = () => {
           settingsStore.findLogList(params).then((res: IHttpResult) => {
               const data = res.data;
               pagination.value.total = data.total;
               logList.value = data.list;
           });
       };
       
       const onChange = (pagination: {current: number, pageSize: number}) => {
           params.page = pagination.current;
           params.pageSize = pagination.pageSize;
       };
       
       const onDelete = (id: number) => {
           alert(id);
       };
      return {
          columnsList,
          logList,
          onDelete,
          onChange,
          pagination
      };
   }
});