vue3.2+TS

3.2代码如下（示例）：

<template>
  <div>
    <el-card>
      <el-form
        ref="form"
        label-width="110px"
        size="mini"
        class="search-form"
        :model="state.search"
        :rules="state.rules"
        :inline="true"
      >
        <!-- 航班号 -->
        <el-form-item
          label="航班号:"
          prop="flightNo"
        >
          <el-input
            v-model="state.search.flightNo"
            placeholder="请输入航班"
            maxlength="10"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="submit"
          >提交{{count}}</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="onReset"
          >重置{{num}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="showDialog = !showDialog"
          >{{!showDialog?'打开':'关闭'}}模态框</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="to"
          >跳转路由</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <!-- 传送门 -->
  <teleport to="body">
    <div
      class="modal"
      v-if="showDialog"
      style="position: fixed"
    >
      fw
      <el-button
        size="mini"
        type="primary"
        @click="showDialog = false"
      >关闭</el-button>
    </div>
  </teleport>
</template>
<script  lang="ts" setup>
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import { key } from "../store";
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
interface ProjectList {
  id: string;
  name: string;
}
//类型
type Search = {
  sourceType: number;
  arr: string;
  dep: string;
  flightNo: string | null;
  flightDate: any;
  ticketDate: any;
  ticketNo: string | null;
};
//路由
const router = useRouter();
//vuex
const store = useStore(key);
/**
 * 初始化对象
 */
const my_search: Search = {
  sourceType: 1,
  arr: "",
  dep: "",
  flightNo: "",
  flightDate: [],
  ticketDate: [],
  ticketNo: null,
};
const state = reactive({
  data: [] as ProjectList[],
  datalist: <any>[],
  search: my_search as Search,
  showDialog: false,
  //表单校验
  rules: {
    flightNo: [{ required: true, message: "请输入航班", trigger: "blur" }],
  },
});
watch(
  () => state.search.flightNo,
  () => {
    console.log("航班号改变");
  }
);
const { search } = state;
const form = ref(null);
//计算属性
const number = computed({
  get: () => search.sourceType + 10,
  set: (val) => {
    search.sourceType = val;
  },
});
//计算属性
const num = computed({
  get: () => search.sourceType + 10,
  set: (val) => {
    search.sourceType = val;
  },
});
/**
 * 提交
 */
const submit = async (): Promise<void> => {
  const ref: any = form.value;
  ref.validate((valid: any) => {
    if (valid) {
      ElNotification({
        title: "成功",
        message: "恭喜你，这是一条成功消息",
        type: "success",
      });
    }
  });
};
/**
 * 重置
 */
const onReset = (): void => {
  state.showDialog = false;
  state.search = my_search;
  state.data = [];
  //操作dom
  const ref: any = form.value;
  search.sourceType++;
  store.commit("increment", search.sourceType);
  ref.resetFields();
};
/**
 * 路由跳转
 */

const to = () => {
  router.push({
    path: "/helloWorld",
    query: { name: 222 },
  });
};
const count = computed(() => store.state.count);
onMounted(() => {
  console.log("onMounted=>", props.visible);
});
</script>

<style lang="scss" scoped>
</style>

3.0代码如下（示例）：

<template>
  <div>
    <el-card>
      <el-form
        ref="form"
        label-width="110px"
        size="mini"
        class="search-form"
        :model="search"
        :rules="rules"
        :inline="true"
      >
        <!-- 航班号 -->
        <el-form-item
          label="航班号:"
          prop="flightNo"
        >
          <el-input
            v-model="search.flightNo"
            placeholder="请输入航班"
            maxlength="10"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="submit"
          >提交{{count}}</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="onReset"
          >重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="showDialog = !showDialog"
          >{{!showDialog?'打开':'关闭'}}模态框</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="to"
          >跳转路由</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <!-- 传送门 -->
  <teleport to="body">
    <div
      class="modal"
      v-if="showDialog"
      style="position: fixed"
    >
      fw
      <el-button
        size="mini"
        type="primary"
        @click="showDialog = false"
      >关闭</el-button>
    </div>
  </teleport>
</template>
<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
  onMounted,
  toRefs,
  computed,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElNotification } from "element-plus";
import { key } from "../store";
//接口
interface ProjectList {
  id: string;
  name: string;
}
//类型
type Search = {
  sourceType: number;
  arr: string;
  dep: string;
  flightNo: string | null;
  flightDate: any;
  ticketDate: any;
  ticketNo: string | null;
};

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    //监听数组
    data: {
      handler(val, oldVal) {
        console.log("数组改变");
      },
      deep: true,
    },
    props: {
      handler(val, oldVal) {
        this.state.showDialog = val.visible;
      },
    },
    "search.flightNo": {
      handler(val, oldVal) {
        console.log("航班号改变");
      },
    },
  },

  setup(props) {
    //路由
    const router = useRouter();
    //vuex
    const store = useStore(key);
    /**
     * 初始化对象
     */
    const my_search: Search = {
      sourceType: 1,
      arr: "",
      dep: "",
      flightNo: "",
      flightDate: [],
      ticketDate: [],
      ticketNo: null,
    };
    const state = reactive({
      data: [] as ProjectList[],
      datalist: <any>[],
      search: my_search as Search,
      showDialog: false,
      //表单校验
      rules: {
        flightNo: [{ required: true, message: "请输入航班", trigger: "blur" }],
      },
    });
    const { search } = state;
    const form = ref(null);
    //计算属性
    const number = computed({
      get: () => search.sourceType + 10,
      set: (val) => {
        search.sourceType = val;
      },
    });
    //计算属性
    const num = computed({
      get: () => search.sourceType + 10,
      set: (val) => {
        search.sourceType = val;
      },
    });
    const methods = {
      /**
       * 提交
       */
      submit: async (): Promise<void> => {
        const ref: any = form.value;
        ref.validate((valid: any) => {
          if (valid) {
            // ElMessage({
            //   message: "恭喜你，这是一条成功消息",
            //   type: "success",
            // });
            ElNotification({
              title: "成功",
              message: "恭喜你，这是一条成功消息",
              type: "success",
            });
            search.sourceType++;

            store.commit("increment");
          }
        });
      },
      /**
       * 重置
       */
      onReset: (): void => {
        state.showDialog = false;
        state.search = my_search;
        state.data = [];
        //操作dom
        const ref: any = form.value;
        ref.resetFields();
      },
      /**
       * 路由跳转
       */

      to: () => {
        router.push({
          path: "/helloWorld",
          query: { name: 222 },
        });
      },
    };
    const count = computed(() => store.state.count);
    onMounted(() => {
      console.log("onMounted=>", props.visible);
    });
    return { ...methods, ...toRefs(state), form, number, num, count };
  },
});
</script>

<style lang="scss" scoped>
</style>