【复盘】转行小白历险记 饿了么轮播图 OpSwipe 组件

一、组件解析：

01OpSwipe 组件的主要功能和用途。

• 它主要用于在网页或移动应用中展示一系列的内容（如图片、卡片等）通过滑动的方式
• 如上图所示

--主要功能

• 滑动轮播：

  • 允许用户通过触摸滑动（在移动设备上）或鼠标拖动（在桌面设备上）来浏览轮播项。

• 自动播放：

  • 组件支持自动播放功能，自动切换轮播项，适用于展示幻灯片或广告。

• 循环播放：

  • 支持循环滑动，当滑动到最后一个轮播项后，可以继续滑动回到第一个轮播项。

• 响应式和触摸友好：

  • 组件设计为响应式，适应不同屏幕尺寸和设备。
  • 优化了触摸操作的响应，提供平滑的触摸滑动体验。

• 定制化：

  • 支持多种自定义选项，如自动播放间隔、轮播方向、是否显示指示器等。

• 动态样式和指示器：

  • 动态计算轨道样式和大小，支持水平或垂直方向的滑动。
  • 显示指示器以指出当前轮播项。
• 内容展示：适用于显示图片集、广告、新闻头条、产品展示等。
• 交互增强：在用户界面中添加交互元素，提高用户参与度。
• 空间节约：在有限的空间内展示更多内容。
• 网站和应用特色：作为网站或应用的特色元素，提升视觉吸引力。

02这个组件是如何实现滑动功能的？

• 滑动功能主要通过处理触摸事件（在移动设备上）和可能的鼠标事件（在桌面设备上）来实现

1. 触摸事件监听

• 组件使用了自定义的 useTouch 钩子来处理触摸事件。
• onTouchStart, onTouchMove, 和 onTouchEnd 事件被用来监听用户的触摸操作。

2. 记录触摸起始点

• 在用户开始触摸（touchstart）时，start 方法记录触摸的起始点。

3. 计算位移

• 当用户在屏幕上滑动（touchmove）时，move 方法计算用户手指从起始点到当前点的水平（deltaX）和垂直（deltaY）位移。

4. 更新组件状态

• 根据计算出的位移更新组件的状态，如轨道的偏移量（state.offset）。

5. 动态样式应用

• 利用 Vue 的计算属性（computed），动态计算轨道元素（track）的样式，特别是 transform 属性，来反映位移的改变。
• 这使得轨道元素可以随着用户的触摸移动而移动。

6. 滑动结束和位置校正

• 当用户停止触摸（touchend）时，根据最终的位移判断是否切换到下一个轮播项或回到当前轮播项。
• correctPosition 方法可能被用于校正轨道的位置，确保滑动结束后轨道处于适当的位置。

7. 自动播放逻辑

• 如果启用了自动播放（autoplay），则定时自动更新轨道的偏移量来实现轮播。

8. 循环播放处理

• 如果启用了循环播放（loop），在达到轮播列表的开始或结束时，适当调整轨道偏移量以实现无缝循环。

二、Vue 3特性：

• 01这个组件使用了 Vue 3 的哪些新特性？请举例说明它们的用途。

  • 1. 组合式 API

    • ref 和 reactive：
      • 这些是 Vue 3 引入的响应式引用和响应式状态管理的核心函数。ref 用于定义一个响应式的引用，而 reactive 用于创建一个响应式的对象。
      • 在 OpSwipe 组件中，ref 和 reactive 被用来定义和管理组件的内部状态，如 root, track, state 等。

  • 2.生命周期钩子

    • Vue 3 提供了组合式 API 下的生命周期钩子，如 onMounted 和 onBeforeUnmount。
    • onMounted 在组件挂载后执行初始化操作，而 onBeforeUnmount 在组件卸载前执行清理操作。

  • 3.自定义组合式函数

    • Vue 3 鼓励开发者创建自定义的组合式函数来封装和重用逻辑。
    • useTouch 是一个自定义钩子，封装了触摸事件处理逻辑，增强了组件的交互能力。

• 02你能解释一下什么是组合式 API，以及它与 Vue 2 的选项式 API 有何不同吗？

        特点

1. 基于函数：使用一系列的函数（如 ref, reactive, computed, watch, setup 等）来创建和管理响应式状态和副作用。

2. 逻辑重用与组织：允许开发者更自然地将相关功能逻辑组合在一起，而不是分散在一个组件的不同选项中（如 data, methods, computed 等）。

3. 更好的类型推断：与 TypeScript 的集成更加紧密，为复杂组件提供更好的类型推断支持。

4. 适用于大型项目：在大型项目或复杂组件中，使代码更易于维护和理解。

import { ref, computed, watch, setup } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

    watch(count, (newValue, oldValue) => {
      // 响应 count 的变化
    });

    function increment() {
      count.value++;
    }

    return { count, doubled, increment };
  }
};

 03在这个组件中，reactive 和 ref 是如何被用来管理状态的？

3.1使用 ref

ref 用于定义一个响应式的引用，它通常用于单个值，如字符串、数字、布尔值等。在组件内，ref 被用来跟踪 DOM 元素或组件的引用，以及定义简单的响应式数据。

在 OpSwipe 中的应用：

• 跟踪 DOM 元素：

const root = ref();
const track = ref();

• 这里，root 和 track 被用来引用组件模板中的 DOM 元素。这些引用后续可用于直接访问和操作这些元素，如获取它们的尺寸或应用动态样式。

• 定义响应式数据： 例如，如果在组件中需要跟踪一个数字或字符串，可以使用 ref 来定义这样的响应式数据。

3.2使用 reactive

reactive 用于创建一个响应式对象，它适用于更复杂的结构，如对象或数组。在 reactive 对象中定义的所有属性都是响应式的。

在 OpSwipe 中的应用：

        定义组件状态：

const state = reactive({
  rect: null,
  offset: 0,
  width: 0,
  height: 0,
  active: 0,
  swiping: false,
});

 这里，state 是一个响应式对象，包含组件的多个状态属性。例如，offset 用于跟踪轨道的当前偏移量，active 用于记录当前活动的轮播项索引，等等。这些状态的变化会自动触发组件的重新渲染。

总结

 在 OpSwipe 组件中，ref 和 reactive 是用来定义和管理组件内的响应式状态的。ref 用于单个值或DOM元素引用，而 reactive 用于包含多个属性的复杂对象。这些响应式状态的变化能够触发组件视图的更新，从而实现动态的用户界面。通过组合式 API，OpSwipe 组件能够以更灵活和组织化的方式管理其内部状态和逻辑。

04createNamespace 和 bem 函数的作用

• ​​​​保证 CSS 类名的唯一性和一致性。
• 提高 CSS 的可维护性和可读性。
• 使得样式更容易模块化和复用。