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
      };
   }
});

setup 

在vue3中没有this对象, 所有的逻辑代码都写在setup方法里面.
若是要在HTML模板页面中使用变量或者方法, 需要在setup方法return出去. 

setup是Vue3 的一大特性函数, 它有几个特性:
1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数

2、setup函数是 Composition API（组合API）的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用

4、由于在执行 setup函数的时候，还没有执行 Created 生命周期方法，所以在 setup 函数中，无法使用 data 和 methods 的变量和方法

5、由于我们不能在 setup函数中使用 data 和 methods，所以 Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined

6、setup函数只能是同步的不能是异步的

defineComponent 

1、defineComponent解决了什么？

vue3中，新增了 defineComponent ，它并没有实现任何的逻辑，只是对setup函数进行封装，返回options的对象，它的存在是完全让传入的整个对象获得对应的类型，它的存在就是完全为了服务 TypeScript 而存在的，在TypeScript下，给予了组件 正确的参数类型推断 。

• 用defineComponent包裹了组件;
• defineComponent函数，只是对setup函数进行封装，返回options的对象；
• defineComponent最重要的是：在TypeScript下，给予了组件 正确的参数类型推断 。

 总结

• defineComponent可以给组件的setup方法准确的参数类型定义.
• 引入 defineComponent() 以正确推断 setup() 组件的参数类型
• defineComponent 可以正确适配无 props、数组 props 等形式
• defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
• 在 tsx 中，element-ui 等全局注册的组件依然要用 kebab-case 形式
• 在 tsx 中，v-model 要用 model={{ value, callback }} 写法
• 在 tsx 中，scoped slots 要用 scopedSlots={{ foo: (scope) => (<Bar/>) }} 写法
• defineComponent 并不适用于函数式组件，应使用 RenderContext<interface> 解决