vue3.0之響應式變量，生命周期

<template>
  <div>
    <div class="ds-serch-box">
      <el-input v-model="search" placeholder="請輸入姓名、警號、賬號" style="width: 250px"></el-input>
      <el-button type="primary" @click="getList">查詢</el-button>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="timeStr" label="日期"></el-table-column>
      <el-table-column label="ip" prop="ip" align="center"></el-table-column>
    </el-table>

    <div class="user-page">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="rows"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import addDialog from "./addDialog";
import SourceMirror from "@/components/resource/dutyMirror";
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  toRefs,
  getCurrentInstance
} from "vue";
export default {
  components: {
    addDialog
  },
  props: {},
  setup(props) {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      search: "",
      currentPage1: 1,
      tableData: [],
      rows: 10,
      page: 1,
      total: 100
    });
    const getList = () => {
      const parmas = {
        page: data.page,
        rows: data.rows,
        search: data.search
      };
      SourceMirror.queryLogs(parmas).then(res => {
        if (res.data.code === 200) {
          data.total = res.data.data.total;
          data.tableData = res.data.data.list;
          proxy.$message({
            message: "成功",
            type: "warning"
          });
        } else {
          proxy.$message({
            message: "失敗",
            type: "warning"
          });
        }
      });
    };
    const handleCurrentChange = page => {
      data.page = page;
      getList();
    };
    onMounted(() => {
      getList();
    });
    return {
      ...toRefs(data),
      getList,
      handleCurrentChange
    };
  }
};
</script>
<style lang="less" scoped>
.ds-serch-box {
  padding: 20px;
  display: flex;
  justify-content: flex-start;
}
.user-page {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>

ref 用來創建簡單的響應式變量

reactive用來創建復雜的響應式對象,參考vue2.0里面的data,然后可以用toRefs去配合