vue3笔记（1-1）基础写法

人生兜兜转转几年没更新，转眼从产品变到项目管理又变成了前端。
最近使用 Vue3+TS 搭建了公司的服务平台，使用 vue-cli5 构建项目，UI 使用了 element-plus，记录一下代码写法和使用过程中的坑。

版本号对应

Vue CLI 4.5以下，对应的是Vue2。
Vue CLI 4.5及以上，对应的是Vue3，当然，创建项目的时候可以选择Vue2。

配置使用IP访问

package.json中添加启动配置

"serve": "vue-cli-service serve  --host 0.0.0.0"

基础概念

1. ref 定义一个基本类型（包含一个数据）的响应式，创建一个包含响应式数据的引用对象。通过给 value 属性添加 getter/setter 实现对数据的劫持。
2. reactive 定义对象（可以包含多个数据）的响应式，返回响应式代理对象（基于 Proxy 实现），会影响对象内部所有的嵌套属性–递归深度响应式。通过 Proxy 实现对对象内部所有数据的劫持，并通过 Reflect 操作对象内部的数据。

组合式API

1. Composition API 可以减少强耦合，避免方法之间互相 this 调用，方法之间互相共享变量，后期维护很麻烦。

效果展示

基础写法

功能：通过表单内容搜索，列表展示搜索结果。

<template>
  <el-main class="server-main">
   <el-form
      ref="serverUserFormRef"
      :model="serverUserForm"
      :rules="rules"
      >
    <el-form-item label="姓名" prop="alias_name">
      <el-input
        v-model="serverUserForm.alias_name"
        name="alias_name"
        type="text"
        placeholder="请输入用户名"
      >
      </el-input>
      <el-button
          type="primary"
          icon="Edit"
          @click.prevent="handleAdd(serverUserFormRef)"
        >创建
      </el-button>
   </el-form>
   <el-table :data="tableData">
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column
          v-bind="item"
          show-overflow-tooltip> 
        </el-table-column>
      </template>
    </el-table>
  </el-main>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue';
import { getUsers, createUser} from "@/api/users";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { Search } from '@element-plus/icons-vue';
import FormInstance from "element-plus";

export default defineComponent({
  name: "XX",
  components: {},
  setup() {
    const emyptForm = {
      alias_name: "",
    }
    const state = reactive({
      serverUserForm: JSON.parse(JSON.stringify(emyptForm)),
      tableData:[]
    });
    const columns = [
      { label: "用户", prop: "alias_name", width: "200" },
    ];

    onMounted(() => {
      getData();
    });

    const getData = () => {
      getUsers({}).then(res => {
        const { data } = res.data
        state.tableData = data.results;
      }).catch((error) => {
        ElMessage.error('获取数据错误！');
      })
    }
    const serverUserFormRef = ref<typeof FormInstance>();
    const rules = {
      alias_name: [{ required: true, message: "请输入用户名", trigger: "blur" }]
    };

    const clearAll = () => {
      state.serverUserForm = JSON.parse(JSON.stringify(emyptForm));
    }
    // 新增
    const handleAdd = (formEl) => {
        formEl.validate((valid: boolean) => {
        if (valid) {
          const params = state.serverUserForm;
          createUser(params).then(res => {
              const { code, data } = res.data
              if(code == 0) {
                  ElNotification({
                      title: '操作成功',
                      message: h('i', { style: 'color: teal' }, '用户已新增！'),
                  });
                  getData();
              } else {
                  ElMessage.error('新增用户错误，请重试！');
              } 
          }).catch(error => {
              ElMessage.error('服务器修复中，请稍后重试！');
          });
          clearAll();
        } else {
          return false;
        }
      })
    }
    return {
      serverUserFormRef,
      ...toRefs(state),
      rules,     
      handleAdd,
      columns,
    };
  }
});
</script>