1.scale将div进行动态缩放

注意：transform-origin可以设置缩放的源点（进行缩放之后会集中到这个位置）

this.scaleNum = 0.5; //可以动态进行改变

<div
class="serviceIntro"
:style="{ transform: `scale(${scaleNum})`, 'transform-origin': 'top' }"
     ></div>

2.@click.self 和 @click.stop

@click.self 和 @click.stop 在大多数情况下是互斥的，并且通常不需要同时使用。它们的作用和效果不同。

• @click.self 用于限制点击事件只在元素自身触发，不包括其子元素。它将阻止事件冒泡到父元素，但不会阻止事件继续传播到其他元素。
• @click.stop 用于阻止点击事件冒泡，即停止事件在 DOM 树中继续向上级元素触发相同类型的事件。它不会限制事件的触发范围，而是直接阻止事件继续向上冒泡。

因此，根据具体的需求，你可以选择使用 @click.self 或 @click.stop，根据事件的处理逻辑和期望的行为来决定。

如果你希望点击元素自身时触发事件，并且不希望事件冒泡到父元素或其他元素，可以使用 @click.self。

如果你希望点击元素时停止事件冒泡，不论是点击元素自身还是子元素，都不会触发其他元素上的相同类型的点击事件，可以使用 @click.stop。

需要注意的是，同时使用 @click.self 和 @click.stop 可能会产生意想不到的结果，因为它们的效果和作用不同。因此，在大多数情况下，不需要同时使用这两个修饰符。

希望这个解释对你有帮助。如果还有其他问题，请随时提问。

3.:deep(.className)代替::v-deep .className

:deep(.swiper-wrapper) {
  transition-timing-function: linear; // 线性过渡模拟走马灯效果
  -webkit-transition-timing-function: linear;
}
:deep(.swiper-pagination-bullet) {
  width: 12px;
  height: 12px;
}

还有一种写法：/deep/

但是在某些版本的scss中不行！

/deep/ .mark_div {
  display: none !important;
}

4.ts中类型几种写法

//ref的时候定义变量
const images1 = ref<any[]>([]);
const images2 = ref([] as any[]);

//普通的定义变量
const images3 = [] as any[];
const images4: any[] = [];

5.nextTick钩子的使用

理解：nextTick就相当于是mounted后面紧接着的一个生命周期，这时DOM元素一定全部渲染完毕了

在 Vue 中，当组件的 mounted 生命周期钩子被触发时，DOM 元素已经被创建，但是并不能保证它们已经完全渲染到页面上。这是因为 Vue 在更新 DOM 时使用了异步的方式，所以在 mounted 阶段结束时，可能仍然存在一些异步更新的操作尚未完成。

使用 $nextTick 方法可以将代码延迟到下一个 DOM 更新周期之后执行。这意味着在 $nextTick 回调函数中的代码将在 DOM 更新之后执行，此时可以确保 DOM 元素已经完全渲染到页面上。

在上述示例中，我们使用 $nextTick 来确保在初始化 Swiper 实例之前等待 DOM 的完全渲染。这样可以避免在没有完全渲染的情况下尝试操作未渲染的 DOM 元素。

总之，使用 $nextTick 可以确保在 mounted 生命周期钩子中执行的代码在 DOM 完全渲染后执行，从而保证代码的正确执行顺序和操作的有效性。

如果你对 $nextTick 有进一步的疑问或需要更多解释，请随时提问。

6.swiper6在vue3中的写法获取swiper实例对象

这里演示实现轮播图鼠标放上去暂停，移开之后继续的实现：

利用@swiper事件，这个事件会在swiper实例创建完毕之后就进行调用方法

let mySwiper;
const onSwiper = (swiper) => {
  mySwiper = swiper;
};
const stopSwiper = () => {
  console.log(mySwiper);
  mySwiper.autoplay.stop();
};
const startSwiper = () => {
  // play.value = true;
  console.log(mySwiper);
  mySwiper.autoplay.start();
};

<div @mouseover="stopSwiper" @mouseleave="startSwiper">
  <swiper
    :spaceBetween="30"
    :slidesPerView="3"
    :autoplay="true"
    @swiper="onSwiper"
  >
    <swiper-slide
      ><img src="@/assets/img/x1/card-1.png" @click="cardAction(1)"
    /></swiper-slide>
    <swiper-slide
      ><img src="@/assets/img/x1/card-2.png" @click="cardAction(2)"
    /></swiper-slide>
    <swiper-slide
      ><img src="@/assets/img/x1/card-3.png" @click="cardAction(3)"
    /></swiper-slide>
    <swiper-slide
      ><img src="@/assets/img/x1/card-4.png" @click="cardAction('more')"
    /></swiper-slide>
  </swiper>
  <!-- 手写的一个轮播视频播放器 -->
  <dialogStaff
    :showDialogPics="showDialogPics"
    :curDataIndex="curDataIndex"
    :curLen="curLen"
    @closeDialog="closeDialog"
    @prev="prev"
    @next="next"
  >
    <video
      v-if="curDataIndex == 1"
      id="video1"
      autoplay
      loop
      :muted="muted1"
      :controls="true"
    >
      <source :src="video1" type="video/mp4" />
    </video>
    <video
      v-if="curDataIndex == 2"
      id="video2"
      autoplay
      loop
      :muted="muted2"
      :controls="true"
    >
      <source :src="video2" type="video/mp4" />
    </video>
    <video
      v-if="curDataIndex == 3"
      id="video3"
      autoplay
      loop
      :muted="muted3"
      :controls="true"
    >
      <source :src="video3" type="video/mp4" />
    </video>
  </dialogStaff>
</div>

7.vue3使用ref获取dom实例对象

const test = ref(null);

<div ref="test"></div>

8.el的clearable注意事项

el-input表单等在设置clearable时，最好在@onChange事件时，将相关的请求参数清除，这样才是完全的进行了清空操作