24-03-25 面试 Vue

作者:guo-zi-xin

更新于:2 个月前

字数统计:430 字

阅读时长:1 分钟

项目中遇到过什么难点

拖拽的功能实现主要使用的什么API

Drag Events API

• dragstart：当拖动操作开始时触发。

• drag：在拖动过程中连续触发。

• dragenter：当拖动元素进入可放置区域时触发。

• dragover：在拖动元素在可放置区域内移动时触发。

• dragleave：当拖动元素离开可放置区域时触发。

• drop：当拖动元素被放置在可放置区域内时触发。

• dragend：当拖动操作结束时触发。

HTML5 Drag and Drop API

• draggable 属性：用于设置元素是否可拖动。

• dataTransfer 对象：用于在拖放操作之间传递数据，包括拖动元素的数据和效果等。

CSS 属性

• cursor：用于指定鼠标悬停在拖动元素上时的光标样式。

• user-select：用于指定用户是否可以选择文本。

JavaScript 编程

• 通过事件监听器监听拖拽相关事件，如 dragstart、dragover、drop 等。

• 在事件处理函数中实现拖拽操作的逻辑，包括设置拖动元素的样式、处理拖动数据、处理拖动过程中的位置变化等。

Typescript常用的类型工具

• Typescript常用类型工具

Vuex和Pinia的区别

option API 和 Composition API 区别

• 在逻辑组织和逻辑复用方面，Composition API是优于Options API

• 因为Composition API几乎是函数，会有更好的类型推断。

• Composition API 对 tree-shaking 友好，代码也更容易压缩

• Composition API中见不到this的使用，减少了this指向不明的情况

• 如果是小型组件，可以继续使用Options API，也是十分友好的