【Vue面试题系列】一

Vue3和Vue2的区别？

1. 响应式系统：Vue3引入了Composition API，这是一种新的响应式系统。Composition API提供了更灵活和强大的组件状态和逻辑管理方式，使代码组织和重用更加方便。Composition API使用函数而不是对象，可以提高树优化（Tree Shaking）并减小打包体积。
2. 更小的包体积：Vue3通过更好的Tree Shaking和更高效的运行时代码生成，相较于Vue2，打包体积更小。Vue3的响应式系统也经过优化，性能更好。
3. 性能改进：Vue3采用了更快、更高效的渲染机制，得益于新的编译器。虚拟DOM的差异化算法经过优化，减少不必要的更新，提升渲染性能。
4. 作用域插槽替代为< slot>：在Vue3中，作用域插槽的概念被更直观、更简化的< slot>语法所取代，使得在组件组合中定义和使用插槽更加容易。
5. 引入Teleport组件：Vue3引入了Teleport组件，可以在DOM树中的不同位置渲染内容，用于创建模拟框、工具提示和其他覆盖层效果。
6. 片段（Fragments）：Vue3引入了一个名为片段的内置组件，允许将多个元素进行分组，而无需添加额外的包装元素。
7. 更好的TypeScript支持：Vue3默认提供了更好的TypeScript支持，具有增强的类型推断和与TypeScript工具更好的集成。

自定义指令是什么？有哪些应用场景？

在Vue中，自定义指令是一种用于扩展Vue的模版语法的机制。通过自定义指令，你可以在DOM元素上添加自定义行为，并在元素插入、更新和移除时进行相应的操作。
自定义指令由Vue.directive函数定义，它接收两个参数：指令名称和指令选项对象。指令选项对象包含一系列钩子函数，用于定义指令的行为。
以下是一些常见的自定义指令的应用场景：

1. 操作DOM：自定义指令可以用于直接操作DOM元素，例如修改元素的样式、属性、事件绑定等。你可以通过在指令的钩子函数中访问和操作DOM元素。
2. 表单验证：你可以创建自定义指令来实现表单验证逻辑。通过自定义指令，你可以监听输入框的值变化，并根据自定义的验证规则进行验证，以便提供实时的反馈。
3. 权限控制：自定义指令可以用于权限控制场景，例如根据用于权限来隐藏或禁用某些元素。你可以在自定义指令中根据用户权限进行条件判断，并修改元素的显示或行为。
4. 第三方库集成：当你需要在Vue中使用第三方库或插件时，可以使用自定义指令来进行集成。你可以创建一个自定义指令，在其中初始化和配置第三方库，并在适当的时机调用库的方法。
5. 动画和过渡效果：自定义指令可以与Vue的过渡系统一起使用，实现自定义的动画和过渡效果。你可以在自定义指令中监听过钩子函数，并根据需要操作元素的样式或类名来实现过渡效果。

说一下vue中，key的原理

在Vue中，key是用于帮助Vue识别和跟踪虚拟DOM变化的特殊属性。当Vue更新渲染真实DOM时，它使用key属性来比较新旧节点，并尽可能复用已经存在的真实DOM节点，以提高性能。
Vue在进行虚拟DOM的diff算法时，会使用key来匹配新旧节点，以确定节点的更新、移动或删除。它通过key属性来判断两个节点是否代表相同的实体，而不仅仅是根据他们的内容是否相同。这样可以保留节点的状态和避免不必要的DOM操作。

key的工作原理如下：

1. 当Vue更新渲染真实DOM时，它会对旧节点进行比较，找出他们之间的差异。
2. 如果两个节点具有相同的key值，则Vue认为他们是相同的节点，会尝试复用已存在的真时的DOM节点。
3. 如果节点具有不同的key值，Vue会将其视为不同的节点，并进行适当的更新、移动或删除操作。

使用key可以提供更准确的节点识别和追踪，避免出现一些常见的问题，比如在列表中重新排序时导致的元素闪烁、输入框内容丢失等。

Vue常用的修饰符有哪些？分别用在什么应用场景？

修饰符是什么？
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花费大量的事件去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理

vue中修饰符有5种：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符

修饰符的作用
表单修饰符：在我们填写表单时候用的最多的是input标签，指令用的最多的是v-model。
lazy：在我们填完信息，光标离开标签的时候，才会将值赋予给value，也就是change事件之后再进行信息同步。
trim：自动过滤用户输入的首空格字符，而中间的空格不会过滤
number：自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值。

事件修饰符：事件修饰符是对事件捕获以及目标进行了处理，有如下修饰符：stop、prevent、self、once、capture、passive、native
stop：阻止事件冒泡 ==event.stopPropagation
prevent：组织了事件的默认行为，==event.preventDefault
self：只当在event.target是当前元素自身时触发处理函数
once：绑定了事件之后只能触发一次，第二次就不会触发
capture：使事件触发从包含这个元素的顶层开始往下触发
passive：在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的页面变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
native：让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用v-on只会监听自定义事件

鼠标按钮修饰符：鼠标按钮修饰符针对的就是左键、右键、中键点击，left、right、middle
键盘修饰符：修饰键盘事件的，enter、tab、delete、ctrl、alt…
v-bind修饰符：主要是为属性进行操作。
sync：能对props进行一个双向绑定
props：设置自定义标签属性，避免暴露数据，防止污染HTML结构
camel：将命名变为驼峰命名。

Vue的响应式开发比命令式有哪些优势？

Vue的响应式开发相较于命令式开发有以下优势：

1. 简化代码：在Vue中，通过将数据和模板绑定起来实现视图更新的自动化，从而避免了手动操作DOM的频繁和容易出错的操作。因此，可以大幅减少编写样板代码和调试代码所需的时间。
2. 提高可维护性：使用Vue的响应式开发可以帮助我们更方便管理应用程序的状态，并对状态变化进行统一处理。这不仅可以提高代码的可读性和可维护性，还可以更方便地进行单元测试和集成测试。
3. 增强用户体验：通过Vue的响应式开发，可以实现局部更新、异步加载等功能，从而提升用户体验。例如，在列表中添加或删除项目时，只需要更新相应的项目，而不是重新渲染整个列表。又比如，在加载大量图片时，可以通过异步加载和懒加载的方式，提高页面加载速度和用户体验。
4. 支持复杂组件设计：Vue的响应式开发支持组件化设计，它能够轻松地将一个大型应用程序拆分成多个小型、可重用的组件。这些组件可以根据需要进行嵌套和组合，形成更为复杂和丰富的UI界面，而且每个组件都具有独立的状态和生命周期。

vue中$route和 $router有什么区别？

它们都是与路由相关的对象，区别如下：

1. route是一个当前路由信息的对象，包括当前url路径、查询参数、路径参数等信息。route对象是只读的，不可以直接修改其属性值，而需要通过路由跳转来更新。
2. router是vue router的实例对象，包括了许多用于导航控制和路由操作的API，例如push、replace、go、forward等方法。router可以用来动态地改变url，从而实现页面间的无刷新跳转。

route和router在功能上有所不同，route主要用于获取当前路由信息，router则是用于进行路由操作，例如跳转到指定的路由、前进、后退等。