• 核心目标
• 封装思路
  • 这个组件做了什么？
  • 父组件使用

在做后台管理系统的时候,搜索条件经常会有日期范围选择.ElementPlus日期范围组件选择的日期值返回的是一个数组.

但是提交的时候,后台有时候是分成两个字段进行接收.

封装一个通用的 日期范围组件（基于 Element Plus 的 ），

让前端使用时简单（用数组表示），

但提交给后端时，能自动映射为两个独立字段：startTime 和 endTime。

核心目标

1. 组件内部 使用 v-model 绑定一个日期数组（[开始时间, 结束时间]）；

2. 对外暴露 时，可以自动：

• 发出完整的数组；
• 或者同时发出 { startTime, endTime } 两个字段；

3. 支持在父组件中自定义字段名（例如后端是 begin_date / end_date）。

封装思路

我们可以封装一个组件，比如叫 DateRangePicker.vue

// DateRangePicker.vue 组件
<template>
  <el-date-picker
    v-model="innerValue"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="YYYY-MM-DD"
    @change="handleChange"
    style="width: 100%"
  />
</template>

<script setup>
import { computed, ref, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => [],
  },
  startKey: {
    type: String,
    default: "startTime",
  },
  endKey: {
    type: String,
    default: "endTime",
  },
});

const emits = defineEmits(["update:modelValue", "update:fields", "change"]);

// 内部绑定值
const innerValue = ref(props.modelValue);

// 监听外部更新
watch(
  () => props.modelValue,
  (val) => {
    innerValue.value = val;
  }
);

// 当值变化时，发出两个不同字段
const handleChange = (val) => {
  emits("update:modelValue", val);

  if (Array.isArray(val) && val.length === 2) {
    emits("update:fields", {
      [props.startKey]: val[0],
      [props.endKey]: val[1],
    });
  } else {
    emits("update:fields", {
      [props.startKey]: "",
      [props.endKey]: "",
    });
  }

  emits("change", val);
};
</script>

这个组件做了什么？

父组件使用

<template>
  <div style="width: 300px; margin: 20px;">
    <DateRangePicker
      v-model="range"
      @update:fields="handleDateFields"
      startKey="beginDate"
      endKey="endDate"
    />

    <div style="margin-top: 20px;">
      <p>当前日期数组: {{ range }}</p>
      <p>提交给后端的对象: {{ dateFields }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DateRangePicker from "./DateRangePicker.vue";

const range = ref(["2025-01-01", "2025-01-15"]);
const dateFields = ref({ beginDate: "", endDate: "" });

const handleDateFields = (val) => {
  dateFields.value = val;
};
</script>

• vue 模版为什么必须是单根的?
• 对vue中模版语法理解
• 对vue3中定义响应式数据(ref和reactive)的理解
• vue computed的回调什么时候执行?
• 响应式系统的核心是什么?
• 静态资源的动态访问(Vite打包构建项目)

最近公司的项目在用Vue3做相关的开发,之前也接触过Vue2的版本,现在重新温故了一下vue相关的知识点,对一些相关概念的理解做下自己的总结

vue 模版为什么必须是单根的?

注意:这是因为虚拟节点树必须是单根的,所以模版必须是单根的.

对vue中模版语法理解

1. 模版语法
2. template -> HTML字符串 -> Vue特性 -> 表达式/属性/指令
3. Vue的模版都是基于HTML
4. 模版中直接写HTML都是能够被HTML解析器解析的
5. Vue -> 表达式/自定义属性/指令
6. Vue有一套自己的模版编译系统
7. 开发者写的template -> 分析 HTML 字符串 -> AST语法树 -> 表达式/自定义属性/指令 -> 虚拟DOM树 -> 解析真实DOM -> render

对vue3中定义响应式数据(ref和reactive)的理解

如果你直接对整个reactive定义的对象进行赋值改变，确实不会触发视图的更新。这是因为reactive函数只会将对象的属性转换为响应式，而不会将整个对象转换为响应式。

如果你想要实现整个对象的动态变化并触发视图更新，可以使用ref函数将整个对象转换为响应式。然后，你可以通过修改value属性来改变整个对象。

在Vue 3中，使用ref函数将一个值转换为响应式对象时，会返回一个包装对象，该对象具有一个.value属性来访问原始值。

这是因为Vue 3中引入了新的响应式系统，将响应式对象的访问和修改分离开来，以提高性能。

vue computed的回调什么时候执行?

必须满足以下两个条件:

1. 读取到计算属性
2. 当前计算属性是脏数据 (isDirty)
   • 2-1 初始化后 isDirty = true
   • 2-2 读取后 isDirty = false
   • 2-3 计算属性依赖的数据变化 (isDirty = true)

响应式系统的核心是什么?

就是: 函数和数据的关联,当数据发生改变,函数重新执行.

静态资源的动态访问(Vite打包构建项目)

依赖分析: (编译时态),并没有运行代码,无法知道变量的值是多少.

自动依赖发现

1. 多媒体元素的静态链接
2. 样式中的静态链接
3. 动态导入语句中的静态或半静态链接
4. URL构造器中的静态或半静态链接

• 1. 校验规则抽离
• 2. 实现值的关联校验
• 3. 在组件中使用
• 4. 总结

在 Element Plus 中，表单校验规则可以单独抽离到一个对象中进行统一管理。如果需要实现“值的关联校验”（如密码和确认密码一致、开始时间小于结束时间等），可以通过自定义校验函数实现。

1. 校验规则抽离

export const formRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    // 关联校验在下面
  ]
};

2. 实现值的关联校验

以“密码”和“确认密码”一致为例：

export const formRules = (form) => ({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

3. 在组件中使用

<script setup>
import { reactive, ref } from 'vue';
import { formRules } from '@/rules/formRules.js';

const form = reactive({
  username: '',
  password: '',
  confirmPassword: ''
});

const rules = formRules(form);
</script>

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="form.confirmPassword" type="password" />
    </el-form-item>
    <el-button @click="submit">提交</el-button>
  </el-form>
</template>

4. 总结

• 校验规则可以单独抽离成模块。
• 关联校验通过自定义 validator，并传入整个表单对象实现。
• 只要在 validator 里能访问到其他字段的值，就能实现各种关联校验。

如需更多复杂校验，可继续扩展 validator 函数逻辑。

• 分页打印 el-table时,如何为每一页增加表头(vue2/vue3)
  • Vue2主要代码:
  • vue3 主要代码:

分页打印 el-table时,如何为每一页增加表头(vue2/vue3)

在做公司项目需求的时候,遇到了一个打印表格的问题,产品项每一页都显示表头内容.项目用的是vue+element ui相关的技术栈

记录一下实现过程中遇到的问题.(实现思路都是相同的,主要是写法优点不同),在实现的过程中还是会有各种问题,打印预览第一页不显示,显示不全或者被截断的情况.

如果使用的是Vue2版本的话,UI组件时Element UI. el-table组件的表格的表头和内容是分开的.主要是为了实现表头固定效果.我们可以复制一份表格的表头,插入到下面的内容中.然后打印的时候,影藏掉原先表格的表头.

Vue2主要代码:

html代码部分

<template>
  <el-table :data="tableData" ref="mytable">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
  </el-table>
</template>

javascript代码部分

export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted: function () {
    // 等待DOM加载完成后再执行
    this.$nextTick(() => {
      let thead = this.$refs.mytable.$el.querySelector('.el-table__header-wrapper thead');
      let theadNew = thead.cloneNode(true);
      this.$refs.mytable.$el.querySelector('.el-table__body-wrapper table').appendChild(theadNew);
    });
  },
}

样式代码,@media print 媒体查询打印的时候样式.

.el-table>>>.el-table__body-wrapper table thead {
  display: none;
}

@media print {
  .el-table>>>.el-table__header-wrapper {
    display: none;
  }

  .el-table>>>.el-table__body-wrapper table thead {
    display: table-header-group;
  }
}

vue3 主要代码:

html代码部分

<template>
  <div>
    <div class="no-print">
      <el-button @click="handlePrint">打印表格</el-button>
    </div>

    <el-table
      ref="elTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="age" label="年龄" width="100" />
      <el-table-column prop="address" label="地址" width="150" />
      <el-table-column prop="job" label="职业" width="150" />
      <el-table-column prop="salary" label="工资" width="150" />

    </el-table>
  </div>
</template>

javascript代码

// setup语法
import { ref, nextTick,onMounted } from 'vue';
const elTableRef = ref();
const tableData = Array.from({ length: 100 }, (_, i) => ({
  name: `张三 ${i + 1}`,
  age: 20 + (i % 10),
  address: `中国某地 ${i + 1}`,
  job: `职位 ${i + 1}`,
  salary: '¥'+(3000 + i * 100).toFixed(2)
}));


onMounted(async () => {
  // console.log(elTableRef.value);
   await nextTick();

   setTimeout(() => {
    const tableEl = elTableRef.value?.$el;
  if (!tableEl) return;


  const headerTable = tableEl.querySelector('.el-table__header-wrapper table');
  const bodyTable = tableEl.querySelector('.el-table__body-wrapper table');


  // 先清理旧的 thead（防止重复插入）
  const existingClonedThead = bodyTable.querySelector('thead.clone-thead');
  if (existingClonedThead) {
    existingClonedThead.remove();
  }

  if (headerTable && bodyTable) {
    const thead = headerTable.querySelector('thead');
    if (thead) {
      const clonedThead = thead.cloneNode(true);
      console.log(555, clonedThead);
      clonedThead.classList.add('clone-thead'); // 标记用于清理
      bodyTable.insertBefore(clonedThead, bodyTable.firstChild);
    }
  }
   }, 100);
});

const handlePrint = async () => {
  await nextTick();
  const tableEl = elTableRef.value?.$el;
  if (!tableEl) return;
  const headerTable = tableEl.querySelector('.el-table__header-wrapper table');
  const bodyTable = tableEl.querySelector('.el-table__body-wrapper table');
  // 先清理旧的 thead（防止重复插入）
  const existingClonedThead = bodyTable.querySelector('thead.clone-thead');
  if (existingClonedThead) {
    existingClonedThead.remove();
  }
  if (headerTable && bodyTable) {
    const thead = headerTable.querySelector('thead');
    if (thead) {
      const clonedThead = thead.cloneNode(true);
      clonedThead.classList.add('clone-thead'); // 标记用于清理
      bodyTable.insertBefore(clonedThead, bodyTable.firstChild);
    }
  }

  window.print();

  // 打印后可选清除
  setTimeout(() => {
    const cloned = bodyTable.querySelector('thead.clone-thead');
    if (cloned) cloned.remove();
  }, 500);
};

样式部分:

<style>
.clone-thead{
  display: none;
}
@media print {
  tr {
    break-inside: avoid; 
    page-break-inside: avoid;
  }
  .el-scrollbar__view {
    display: block !important;
  }
  .el-table__inner-wrapper {
    height: auto;
  }
  .el-scrollbar {
    height: auto !important;
  }
}
  @media print {
    :deep(.el-table__header-wrapper table thead) {
      display: none!important;
    }
    .clone-thead {
      display: table-header-group;
    }
  }

  @media print {
  .el-table__header-wrapper {
    display: none !important;
  }
  thead {
    display: table-header-group !important;
  }
  tfoot {
    display: table-footer-group !important;
  }
  .no-print {
    display: none !important;
  }
  tr {
    page-break-inside: avoid;
  }
  .el-table__body-wrapper table,
  .el-table__body-wrapper table thead.clone-thead,
  .el-table__body-wrapper table tbody {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    width: 100% !important;
  }
}
</style>

• Vue3+vite 项目中动态引入图片(非 public 目录)
  • 开发环境截图
  • glob 导入 动态引入图片
  • 生产环境截图
  • 逻辑部分 JS 代码(setup 语法糖)
• 使用 new URL() 的方法进行动态导入

Vue3+vite 项目中动态引入图片(非 public 目录)

今天在做项目的时候，使用动态路由配置,发现在 vue3+vite 项目中，动态引入图片，在开发环境中的时候,图片可以正常显示,但是打包构建后,部署生产找不到图片的,经过一番搜索,找到了解决方法,如下：

首先模版中的代码:

<template>
  <div class="eggs-con">
    <router-link
      v-for="(dataEgg, index) in dataEggs"
      :key="dataEgg.id"
      :to="{ name: 'eggs', params: { eggType: dataEgg.type } }"
    >
      {{ dataEgg.name }}
      <el-divider v-if="index !== dataEggs.length - 1" direction="vertical" />
    </router-link>

    <div v-if="!dataEgg">
      <h1>查无此蛋</h1>
    </div>
    <div v-else>
      <h1>{{ dataEgg.name }}</h1>
      <p>{{ dataEgg.description }}</p>
      <p>{{ dataEgg.flavour }}</p>

      <!-- 开发环境可以正常的显示,打包后无法正常预览 -->
      <img :src="`../../src/assets/images/${dataEgg.image}`" alt="" />

      <h2>import.meta.glob (动态导入)</h2>
      <img :src="imageSrc" v-if="imageSrc" />

      <br />
      <!-- <img :src="picture.default" alt=""> -->

      <h2>使用计算属性方式:(new URL)</h2>
      <img :src="imageSrcCom" alt="" />
    </div>
  </div>
</template>

之前用 vue2 版本的时候,使用的是require来引入图片,打包构建工具是webpack,但是现在使用的是vite构建,所以需要使用import.meta.glob来引入图片,并且需要使用new URL来获取图片的路径. vite 和 webpack 的核心差别还是挺大的，在 vite 中并没有这样的包。

开发环境截图

glob 导入 动态引入图片

Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块（该方式为异步加载模块形式），该函数接收一个匹配模块文件的通配符，返回一个对象，其中键是文件路径，值是可以导入相应模块的函数。

其中,data.json 文件中的内容如下:

[
  {
    "id": 1,
    "name": "鸡蛋",
    "type": "chicken-egg",
    "image": "chicken-egg.jpeg",
    "description": "又名鸡卵、鸡子，是母鸡所产的卵",
    "flavour": "味甘，性平，无毒（煮熟后）"
  },
  {
    "id": 2,
    "name": "鸭蛋",
    "type": "duck-egg",
    "image": "duck-egg.jpeg",
    "description": "又名鸭子、鸭卵、太平、鸭春、青皮等，为鸭科动物家鸭的卵，受精卵可孵化成小鸭",
    "flavour": "性涼、味甘"
  },
  {
    "id": 3,
    "name": "鹅蛋",
    "type": "goose-egg",
    "image": "goose-egg.jpeg",
    "description": "家禽鹅生下的卵",
    "flavour": "有些油"
  },
  {
    "id": 4,
    "name": "鹌鹑蛋",
    "type": "quail-egg",
    "image": "quail-egg.jpeg",
    "description": "鵪鶉所產的卵，蛋殼表面帶有棕褐色斑點",
    "flavour": "味甘、性平"
  },
  {
    "id": 5,
    "name": "笨蛋",
    "type": "dumb-egg",
    "image": "dumb-egg.jpeg",
    "description": "我才不是笨蛋",
    "flavour": "没吃过"
  }
]

生产环境截图

逻辑部分 JS 代码(setup 语法糖)

import { ref, computed, watch, watchEffect } from 'vue';
import dataEggs from '../src/data.json';

const imageSrc = ref('');

const eggType = computed(() => route.params.eggType);
const dataEgg = computed(() =>
  dataEggs.find((egg) => egg.type === eggType.value)
);

// 方式1: // 使用 import.meta.glob 动态导入图片 不配置  { eager: true }
const images = import.meta.glob('../src/assets/images/*.jpeg');

watchEffect(async () => {
  if (dataEgg.value && dataEgg.value.image) {
    const imagePath = `../src/assets/images/${dataEgg.value.image}`;
    const imageModule = images[imagePath];
    if (imageModule) {
      try {
        const img = await imageModule();
        imageSrc.value = img.default;
      } catch (error) {
        console.error('Image not found:', dataEgg.value.image, error);
        imageSrc.value = '';
      }
    } else {
      console.error('Image not found:', dataEgg.value.image);
      imageSrc.value = '';
    }
  } else {
    imageSrc.value = '';
  }
});

以上这种方式匹配到的文件默认是懒加载的, 通过动态导入实现,并会在构建时分离为独立的 chunk 文件。如果你倾向于直接引入（同步加载使用）所有的模块，你可以传入 { eager: true } 作为第二个参数`.

// ...
// 省略导入相关文件

// 方式1: // 使用 import.meta.glob 动态导入图片 配置 { eager: true }
const images = import.meta.glob('../src/assets/images/*.jpeg', { eager: true });

watchEffect(() => {
  if (dataEgg.value && dataEgg.value.image) {
    const imagePath = `../src/assets/images/${dataEgg.value.image}`;
    const imageModule = images[imagePath];
    if (imageModule) {
      // console.log('imageModule.default', imageModule.default);
      imageSrc.value = imageModule.default;
    } else {
      console.error('Image not found:', dataEgg.value.image);
      imageSrc.value = '';
    }
  } else {
    imageSrc.value = '';
  }
});

使用 new URL() 的方法进行动态导入

在 Vue 中，如果你需要使用动态导入图片，你可以使用 new URL() 方法来获取图片的路径。

// ...
// 省略导入相关文件

const imageSrcCom = computed(() => {
  if (dataEgg.value && dataEgg.value.image) {
    try {
      return new URL(
        `../src/assets/images/${dataEgg.value.image}`,
        import.meta.url
      ).href;
    } catch (e) {
      console.error('Image not found:', e);
      return '';
    }
  }
  return '';
});

在 new URL() 方法中，import.meta.url 是一个特殊的变量，它表示当前模块的 URL。 在 vue3+vite的项目中,如果需要动态的导入图片,可以使用上面介绍的方法,防止在开发环境中好好的,打包构建后,部署到生产环境,图片无法正常预览...

• Vue3 中 reactive()中定义的对象再次赋值,页面不会自动更新
  • reactive 定义的数据不能直接赋值
  • 解决方法

Vue3 中 reactive()中定义的对象再次赋值,页面不会自动更新

在 vue3 里，ref 和 reacitve 都可以定义响应式数据，但是两者有所不同。 在使用 reactive 定义复杂结构的响应式数据时，如果你要对其赋值，会丢失其响应性。然后赋值是我们经常进行的操作，那么该怎么解决呢？

reactive 定义的数据不能直接赋值

// 定义的表单响应式数据
let ruleForm = reactive({
  name: '',
  gender: '',
  age: 20,
  salary: '',
  createtime: new Date().getTime(),
});

// 请求接口成功后表单需要默认初始值

// 需要这样的赋值
const getStudentDetailInfo = () => {
  indexModel.getStudentDetail(id).then((res) => {
    const { code, msg } = res;
    // 这样赋值没效果
    if (code === 200) {
      ruleForm = { ...res };
    }
    // 下面这样赋值可以,但是如果有很多字段,需要写很多
    // ruleForm.name = res.name;
    // ruleForm.gender = res.gender;
    // ruleForm.age = res.age;
    // ruleForm.salary = res.salary;
  });
};

解决方法

• 方法 1: 改为ref定义响应式数据

let ruleForm = ref({
  name: '',
  gender: '',
  age: 20,
  salary: '',
  createtime: new Date().getTime(),
});

ruleForm.value = { ...res };

2.如果是数组的话,可以使用 push 新增数据

const arr = reactive([]);
arr.push(...[1, 2, 3]);

3. 再封装一层数据(推荐!)即定义属性名,在后期赋值的时候,对属性名进行赋值

const state = reactive({
  arr: [],
  ruleForm: {},
});

state.arr = [1, 2, 3];
state.ruleForm = { ...res };

但是这样的话在 html 模板里，使用数据就得 state.arr 所以我们可以用解构将它 return 出来（script setup 里面 不需要 return 解构出来即可）

但是 reactive 解构出来的数据会丢失响应性 所以再用 toRefs()方法为它们添加响应性

最终为:

const state = reactive({
  arr: [],
  ruleForm: {},
});
state.arr = [1, 2, 3];
state.ruleForm = { ...res };
return { ...toRefs(state) };

//如果是在 script setup 里面 不需要return 解构出来即可

const { ruleForm, arr } = toRefs(state);

• Vue 3 script setup 语法糖到底做了什么?setup语法糖和setup函数写法到底有啥区别
• setup 语法为什么要这么做?

Vue 3 script setup 语法糖到底做了什么?setup语法糖和setup函数写法到底有啥区别

script setup 它是一个语法糖,相当于包含在 setup 函数里面. 返回的值会自动注入到当前作用域中.

script setup 是一个语法糖，它相当于在 setup 函数中包含的代码。它允许你在一个组件中同时定义数据和逻辑，并通过一个简单的语法来声明组件的属性和事件。

要了解清楚这两种写法的差异,就要看他们的编译结果.因为最终运行的一定不是这个单文件组件,而是单文件组件编译出来的结果.

需要用到vite-plugin-inspect插件.进行配置.查看编译结果.

setup 语法糖编译结果会自动调用 expose() 方法,而 setup 函数的编译结果不会调用 expose() 方法.

• setup 函数写法:

expose: [], 暴露这个组件实例中的哪些成员.

如果做了这个配置,就不会暴露其他乱七八糟的成员了.只会暴露你配置的东西.

• setup 语法糖

使用 setup 语法糖的话,它会自动给你加上.这就导致了用这种模式产生的组件,它的组件实例里面,实际上是没有暴露任何东西的.

setup 语法糖编译结果会自动调用 expose() 方法,而 setup 函数的编译结果不会调用 expose() 方法.

setup 语法为什么要这么做?

组件实例里面有这些东西不好吗? 为什么这个语法要多此一举,去阻止它暴露这些东西呢?

是因为暴露这些东西实际上不是一件好事.因为这就提供了一种可能,你在这个组件之外,你可以通过 ref 给这个组件加个 ref,然后去拿到这个组件的实例.this.$refs.xxx,通过这个实例去访问这些组件内部的成员.然后执行某种操作,这样就打破了单向数据流的规则.

这个是组件内部的数据,你就给外部提供了一种改动它的可能性. 这种做法式有很大的隐患的.单向数据流一旦被打破,代码就离屎山越来越近啦.

所以为了解决这个问题,vue3 就加入了整个expose.而在 setup 语法糖里面,会自动调用expose方法,防止你向外暴露太多东西. 如果你一定要暴露的话,就自行调用这个方法.

setup 语法糖里面,暴露某些东西,可以使用 defineExpose 方法. 编译的时候,会转换为 expose 方法.

这也就是为什么 defineExpose,defineProps,defineEmits 使用不需要导入,因为它们不参与运行的.它们只是用来在编译阶段做语法糖的.

运行环境里面压根就没有这些函数,它只是在编译环境里面,给你做了一个对应.

所以,以后在写 Vue3 的时候,尽量使用 setup 语法糖.因为它会隐式的帮你去做这件事情.

如果说你没有手动的声明就表示那么它默认情况下,不会向外界暴露任何东西,就保护了单向数据流.这是一个强约束. 强约束永远是好于规范的.

• Chrome高级调试技巧总结

Chrome高级调试技巧总结

• 一键重新发起请求

在与后端接口联调或排查线上bug时候,我们需要重新发起一次请求非常实用.在network中找到对应的请求,然后右键鼠标,选择 Replay XHR即可重新发起一次请求

• 在控制台快速发起请求

在联调或者修改bug的时候,我们需要修改入参,然后重新发起请求; 比如后端在找bug,然后让你把某个字段先写死一个固定值.又比如在做导出功能的时候,一直出问题,这时我们判断应该是请求头设置有问题.可能需要不断的调整代码中的请求头,然后执行代码重新发送请求.其实可以在控制台中快速发起请求. 步骤如下

(1).打开network,找到需要修改参数的请求.

(2).右击选择 Copy as fetch

(3).粘贴到console中,修改请求参数,按回车

(4).在network中查看响应结果

​

• 复制Javascript复杂对象

比如我们在代码中使用console.log打印复杂对象的时候,它是格式化的,不便于复制给其他人看.

var obj = {

​ name:'张三',

​ age:25,

​ gender:'male',

​ edu:'本科'

}

console.log(obj)

为了拷贝:

console.log(JSON.stringify(obj))

现在实现 copy(obj)

• 截取一张全屏的网页

对网页截屏的需求我们应该一直都用,一屏还好,系统自带的截屏或者微信截图等都可以,但是要超出一屏的内容咋办?

chrome其实已经给我们准备好啦.

(1)打开要截图的网页

(2)cmd+shift+P 执行Command命令

(3)输入Capture full size screenshot按下回车即可

• 条件断点妙用 (Add conditional breakpoint)
• $i 直接控制台安装npm包

有时候,我们想使用比如dayjs 或者 lodash的某个API,但又不想去官网查,如果可以在控制台直接试出来就好.就可以安装这个插件.

$i('dayjs')

$i('lodash')

然后就可以尝试使用其API

• 调试一些ToolTips弹出框样式

打开控制台,按住common+shift+p,然后选择disable javascript即可.

如果需要启用Javascript,则再次打开,选择enable javascript即可.

• 什么是Promise?

什么是Promise?

当面试时问到什么是Promise? 应该怎么回答:

首先说一下Promise A+规范 , 当有一个符合Promise A+规范的 then 方法的对象.就是一个Promise.而 ES6 出现之后, 它带来了一个构造函数,通过这个构造函数,可以创建一个 满足Promise A+ 规范的Promise对象. 这就是Promise.

异步问题同步化的解决方案. Promise执行是同步的 (executor 同步)？ p.then 是异步的

当说到Promise,它有两层含义:

• Promise A+规范 (出现的时间点比较早,在ES6之前) 民间标准 (社区搞出来的) (2015年之前) 主要处理回调地狱和异步处理不统一的问题

• 符合PromiseA+规范的 (例如:)

一个对象包含一个then方法,是一个Promise

  { then:function(){} }

这个也是一个Promise

  function A(){}
  A.then = function(){}

直到ES6出来,搞了一个构造函数 Promise. 整个构造函数和 Promise A+ 规范有什么关联呢?

当你通过构造函数去创建一个对象,创建的那个对象它是满足 Promise A+规范的. ES6吸纳了 Promise A+ 规范.

它创建的Promise 满足Promise A+ 规范,而且还增加了很多其他的东西.

比方说 它给里面增加了一个catch 方法, finally, 增加了一些静态方法: Promise.all,Promise.race,Promise.resolve 等等.

这些并不是Promise A+ 规范中的规定. 而是ES6 中Promise新增的.

而且在Promise A+ 规范里面,它有一个说法.就是你只要满足Promise A+ 规范,你就是一个Promise, 而你只要是一个Promise.你们之间就可以互操作. (这个就比较有意思啦~~)

比如说我们用过的一个库jQuery, 中有一个写法:

// 返回的是一个Promise,但是并不是ES6通过构造函数创建的Promise
// 而是它自己写的一套满足Promise A+规范的Promise,但是你感觉不到.仍然可以使用await关键字.可以使用.then方法
// 而且这个then 方法还可以跟我们这个ES6 的Promise进行互操作.
await $.ajax().then()

感觉上它好像就是ES6的Promise.但实际上它不是的. 不是它为什么能够进行互操作呢? 是因为 无论是 ES6 的Promise,还是你自己写的Promise,或者是第三方库里面自己实现的Promise.它们都满足 Promise A+ 规范. 只要满足这个规范.它们就可以互操作.

• 规范的产生背景
• 规范翻译
• Promise
• then方法
• 任务完成处理流程
• 解读

规范的产生背景

该规范产生于2012年左右，它是 Promise A+ 规范的升级版

可以看出在出现时间上，Promise A+ 是早于 ES6 的, 民间标准 (社区搞出来的)

在那个时候，为了处理异步场景，JS中充斥着各种回调函数：

// 以回调模式处理异步

button.addEventListener("click", function(e){
  // 回调函数
})

setTimeout(function(){
  // 回调函数
}, 1000)

过去，回调函数也不是唯一的处理异步的方式，有些异步场景也可以把函数保存到对象的属性中，以便将来调用：

// 保存函数的属性
xhr.onreadstatechange = function(){

}

button.onclick = function(){

}

可以看出,过去处理异步的方式是不统一的! 在那个混乱的异步处理年代,Promise A+ 横空出世. 它不是一个技术,而是一套规范

它希望所有的前端开发者都遵循这套规范.使所有的开发者书写的异步代码达到统一

后来,ES6在制作Promise标准时,就参考了该规范.

规范翻译

一个 Promise 对象应该能够表达一个异步操作，异步操作无论成功还是失败，总会有一个结果，这个结果可以通过它的then方法来进行交互，具体的交互方式是，注册一个回调函数到then方法中

该规范详细的描述了then方法的具体规格

Promise

promise 用于表示一个异步任务,它应该是一个带有then 方法的对象.它有三种状态: pending挂起, fulfilled完成,rejected失败

任何时刻,promise一定处于三种状态之一.

ES6中的 Promise完成状态是 resolved,单词不同,含义一样.

1. 当 promise 处于 pending 状态时：

   它可以在任何合适的时候把状态转变为fulfilled或rejected

2. 当 promise 处于 fulfilled 状态时：

   它无法再次更改到其他状态

   它必须拥有一个值，表示任务完成时的数据，该数据可以是任何 JS 数据（甚至是 undefined），并且这个值一旦确定下来，不可更改

3. 当 promise 处于 rejected 状态时：

   它无法再次更改到其他状态

   它必须拥有一个值，表示任务失败的原因，该值可以是任何 JS 数据（甚至是 undefined），并且这个值一旦确定下来，不可更改

then方法

promise 应该提供一个 then 方法，通过这个方法，我们可以访问到任务完成的值 或 任务失败的原因

then方法可以接收两个参数：

promise.then(onFulfilled, onRejected)

1. onFulfilled 和 onRejected 都是可选参数：

   如果 onFulfilled 不是一个函数，它必须被忽略

   如果 onRejected 不是一个函数，它必须被忽略

2. 如果 onFulfilled 是一个函数：

   它应该在 promise 到达 fulfilled 状态时被调用，调用该函数时，应该把任务完成时的值作为第一个参数传递进去

   该函数只能被调用一次

3. 如果 onRejected 是一个函数：

   它应该在 promise 到达 rejected 状态时被调用，调用该函数时，应该把任务失败的原因作为第一个参数传递进去

   该函数只能被调用一次

4. onFulfilled 和 onRejected必须要等到当前执行栈清空后才能被调用，换句话说，它们是异步执行的

5. 可以多次对同一个promise调用then方法，从而注册多个onFulfilled或onRejected

   当任务完成 或 任务失败时，将按照注册的顺序，依次调用注册的 onFulfilled 或 onRejected

6. then方法必须再次返回一个promise

promise2 = promise1.then(onFulfilled, onRejected);

在执行onFulfilled 或 onRejected 时，如果执行的过程中报了一个错误，则会导致 promise2 进入 rejected 状态，并且和状态相关的失败原因就是抛出的错误

在执行onFulfilled 或 onRejected 时，如果执行的过程中没有发生错误，并且返回值是 x（x 可以是任何数据，包括undefined），则会进入 任务完成处理流程 [[Resolve]](promise2, x)，该流程在下一个小节解释

如果onFulfilled不是一个函数，同时promise1已经fulfilled，promise2也会自动变成fulfilled，完成的相关数据和promise1一致

如果onRejected不是一个函数，同时promise1已经rejected，promise2也会自动变成rejected，失败的原因和promise1一致

任务完成处理流程

这个流程是一个概念上的操作规范，而不是真实的代码

Promise A+ 期望实现该规范的代码也是要实现这个处理流程

为了便于说明，Promise A+ 把这个操作规范记作[[Resolve]](promise, x)，它应该按照以下的流程进行：

1. 如果promise和x是同一个对象，则把promise设置为rejected状态，失败原因是一个TypeError
2. 如果x是一个promise：
   1. 如果x处于pending，promise也必须处于pending，直到x完成或失败
   2. 如果x完成，promise也会完成，数据和x完成的数据一致
   3. 如果x失败，promise也会失败，原因和x失败原因一致
3. 如果x是一个对象或函数：
   1. 读取x.then，如果读取发生异常，则直接让promise失败，失败原因就是抛出的错误，然后结束处理即可
   2. 如果x.then是一个function
      1. 调用x.then方法：x.then(onFulfilled, onRejected)
      2. 当onFulfilled执行时，如果得到的数据是y，则执行[[Resolve]](promise, y)
      3. 当onRejected执行时，如果得到的失败原因是error，则让promise变成失败状态，原因是error
   3. 如果x.then不是一个function， 把promise变成fulfilled状态，数据为x
   4. 如果调用x.then的时候发生错误，则把promise变成失败状态，失败原因为抛出的错误
4. 如果x不是一个对象或函数，把promise变成fulfilled状态，数据为x

解读

1. ES6 的 Promise 和 Promise A+ 是一个什么样的关系？

   ES6 的 Promise 遵循的是 Promise A+ 的规范 这也就意味着 ES6 的 Promise 完全可以和其他遵循了 Promise A+ 规范的 Promise 进行互操作 比如，ES6 的 Promise 可以和 JQuery 的Promise进行互操作

$.ajax(...).then(resp=>{
    // 这是JQuery的Promise的then函数
  return new Promise(resolve=>{
      // 这是ES6的Promise     
  })
})

2. 关于Promise的catch函数

Promise A+ 规范中并没有规定需要提供catch，但ES6的Promise提供了这一函数，它是为了让开发者使用起来更加方便

这并不代表ES6的Promise打破了这一规范，因为绝大部分规范都是只规定了你至少有什么东西，并不关心你多了什么东西

3. Promise必须通过构造函数new Promise得到吗？

Promise A+没有这样规定，它可以通过任何途径得到，只不过ES6的Promise是通过构造函数得到的

Promise A+规范，要求Promise必须是一个对象或是一个函数，该对象或函数提供了满足要求的then方法即可

比如，下面的代码得到的都是满足规范的Promise

const promise1 = {
  then(onFufilled, onRejected){
    // 满足规范的then函数
  }
}

const promise2 = function(a, b){return a+b}
promise2.then = function(onFufilled, onRejected){
  // 满足规范的then函数
}

4. 关于Promise的状态

Promise A+ 并没有要求Promise必须提供什么属性来得到状态，这些都是Promise的内部信息，你可以对外提供，也可以不提供

ES6的Promise提供了两个属性[[PromiseStatus]]和[[PromiseValue]]，分别表示Promise的状态和状态的相关数据（成功的数据或失败的原因），但这两个属性均无法在外部访问

另外，Promise A+ 也没有对状态的名称做出强制要求，在规范文档中，Promise A+ 使用了pending、fufilled、rejected，但这些名称仅仅是为了说明规范而产生的，在具体的实现中，你可以自行规定任何的名称来表示三种状态

ES6的Promise就使用了pending、resolved、rejected来表示三种状态，这并没有打破Promise A+规范