Vue

一些低代码平台的设计端会有这样功能的组件：用拖拽的方式将组件放入页面中，并可以调整组件的大小和位置。 目标效果如下图

非父子组件包括兄弟组件传参、祖先后代传参，Vue3 和 Vue2 的实现方式有所不同，并且Vue3 移除了 `$on、$off、$once` 等方法，Vue3 中非父子组件之间的传值方式如下

defineProperty 的原理是：采用*数据劫持*结合*发布者-订阅者模式*的方式，通过`Object.defineProperty()`来劫持各个属性的 `setter`，`getter`，在

一般情况下使用 SVG 是因为它有如下特点： SVG 图像改变尺寸的情况下图形质量不会有所损失（在图像质量不下降的情况下被放大） 在项目中易于维护，比普通的图片类型的大小要小 对 SEO友好

在 Vue2 中使用`Object.defineProperty` 来实现数据的响应式，在 Vue3 中使用 `Proxy` 来实现响应式

`i18n` 想必大家并不陌生，它是前端国际化的一种实现方式，在项目中最常见的就是中英文之间的切换。 在项目开发中，我们既可以根据所使用的框架提供的方法进行配置，配置后可以直接使组件的文字在中英文之

在项目开发的过程中，v-if 是经常使用的指令。但当我们所需渲染的数据量较大，并且需要动态渲染的时候， v-if 并不是最佳解决方案

平时常的规操作都是父组件嵌套子组件，不知道大家是否有遇到过子组件嵌套父组件的场景。正常情况下，无论如何调用，组件与组件之间应该是互不影响的。但是在这里面会涉及到一些逻辑问题，导致组件

随着前端技术不断地迭代，项目中也从 vue2 选项式 API的写法，到 Vue3 中使用setup()，再到 setup 语法糖一路升级。后来的某一天，经历了对原有代码结构认知的重塑...

在开发时，总是需要监听某些数据变化，再根据数据的变化进行响应， Vue3 中既可以使用 watch 也可以使用 watchEffect,那么他们俩该怎么使用，又有什么区别呢？

toRef()与 toRefs()都是用来解构响应性对象中的属性的，并且让解构后的属性保留响应式（最终都会转换成 ref）

在 Vue 中，每个组件都是独立的，都有属于它自己的生命周期，Vue2 与 Vue3 生命周期对比能帮助我们更好地理解生命周期

在 setup 中，数据并不是响应式的，所以需要使用 ref 或者 reactive 对数据进行处理，也就是创建响应式数据

在进行 Vue 项目开发时,看到了这样的写法，感觉打开了新大陆，上图中的 `@Watch` 是一个 Watch 属性的装饰器，它有自己的声明规则，写法与 Python 和 Java 中的语法非常类似

在对状态管理中的数据进行修改时，不要 使用 `state` 直接进行数据变化的操作，Vuex 为我们提供了方式： - mutation - action

Vue2 中，props:[] 以及 emit() 进行父子组件交互，而 Vue3 中需要使用： - defineProps - defineEmits

Vue3中有三种特殊的attribute（属性），具体如下： - key - ref ：用于注册模板引用 - is ：用于绑定动态组件

其实选项式 API 是在组合式 API 的基础上实现的，新的setup语法糖往往搭配**组合式API**一起来使用。

在Element-UI el-table中使用 sortabe 较好（也就是用来实现表格的拖拽功能）；表单的拖拽使用 vuedraggable 居多，适应大多数应用场景，包括表格的拖拽也有很好的支持，

路由分为两种模式：hash 模式和 history 模式（HTML5 模式） ### 1. hash 模式 - **表现形式：** 地址栏URL中的`#`号后 + hash值。