1.v-if 和 v-show的区别
在Vue中这两个命令都用于控制元素的显示与隐藏。
(1) v-if
- 动态控制元素显示与隐藏，本质上是动态销毁或者重建元素，会触发浏览器重排与重绘。
- 在切换状态时有一个局部编译/卸载的过程会适当重建或者销毁内部的事件监听、子组件。
- 是真正的条件渲染，会触发组件的生命周期。
- 可搭配v-else-if、v-else使用
- 官方不建议其与v-for指令在同一个元素上使用，因为v-if的优先级高于v-for，可能会造成一些不必要的BUG。
(2) v-show
- 动态控制元素显示与隐藏，本质上是控制元素的display属性，不会销毁重建元素，只会切换元素的显示状态，不会触发重排，只会触发重绘。
- 只是简单的css属性切换。
- 不会触发组件生命周期。
(3) 使用场景
- 如果需要频繁切换元素的显示状态，建议用v-show。避免频繁的操作DOM元素，减少性能开销。
- 如果元素需要控制元素的创建与销毁，则使用v-if。
2.v-for中的key属性
(1) key属性
- key属性是Vue中v-for指令中使用时必须为绑定元素设置的一个属性，用于标识列表中的每个元素，从而实现列表的更新与删除。
- 本质上vue在底层渲染时，会通过key属性来判断前后两次渲染是否是同样的元素，如果key值相同且元素type也相同就会认为元素本身前后两次没有变化，从而就只会更新元素的props和conetnt，不会销毁重重建元素，避免了多余的dom操作，减少性能消耗。
- 在v-for中如果列表的元素需要动态操作，测最好是将key值设置为一个唯一的值，这样在渲染时就会判断更准确。
(2) 作用
- 提高虚拟dom的更新。
- 提高列表的更新与删除效率。
- 避免不必要的多月dom操作。
3.vue中组件的生命周期
1.主要的的生命周期
1.setup()函数:
- 这个函数在Vue项目最先开始初始化时执行，在Vue3中正式被引入，并且代替了Vue2的beforeCreated()和created()。
- 在这个函数中我们通常可以做一些变量初始化，数据请求等前置工作。
2.beforeCreate() - (vue3之后被setup函数代替):
- beforeCreate函数是创建组件实例之前的生命周期函数，此时组件的数据和事件都还没有被初始化。
3.created() - (vue3之后被setup函数代替):
- created函数是创建组件实例之后的生命周期函数，此时组件的数据和事件已经被初始化。
- vue3中使用setup函数代替了beforeCreate和created函数，但如果使用optionsAPI编写Vue3项目是还是可以使用这两个生命周期，官方建议使用setup。
- 值得注意的是vue3推荐使用组合式API，而这两个函数并为提供对应的组合式API，这也表明官方不推荐再使用这两个函数。
4.beforeMount() - onBeforeMount:
- beforeMount函数是挂载之前执行的函数,此时组件的模板还没有被挂载到页面上。在vue3中这个函数被重命名为onBeforeMount。
5.mounted() - onMounted:
- mounted函数是挂载之后执行的函数,此时组件的模板已经被挂载到页面上。在vue3中这个函数被重命名为onMounted。
- 这个生命周期函数是开发中除了setup之外使用最多的，一般的数据请求等相关操作都可以在这个函数中执行。
6 .beforeUpdate() - onBeforeUpdate:
- beforeUpdate函数是更新之前执行的函数,此时组件的数据已经更新，但模板还没有被更新。在vue3中这个函数被重命名为onBeforeUpdate。
7.updated() - onUpdated:
- updated函数是更新之后执行的函数,此时组件的数据和模板都已经更新。在vue3中这个函数被重命名为onUpdated。
8.beforeDestroy() - onBeforeUnmount：
- beforeDestroy函数是销毁之前执行的函数,此时组件的数据和模板都还在，但组件实例已经被销毁了。在vue3中这个函数被重命名为onBeforeUnmount。
9.destroyed() - onUnmounted：
- destroyed函数是销毁之后执行的函数,此时组件的数据和模板都还在，但组件实例已经被销毁了。在vue3中这个函数被重命名为onUnmounted。
2. 其他特殊的生命周期函数
(1).keep-alive组件生命周期
keep-alive这个组件是一个Vue内置组件，它的作用就是用来缓存页面或者组件的。在keep-alive中使用的组件在第一次被加载之后就会被缓存下来，下一次进入或者挂载就不会再次重新创建组建了，直接复用缓存的组件。因此就会导致组件部分的生命周期函数不会被执行，从而会调用一些特殊的生命周期函数。具体如下：
- onActivated: 这个函数只有在keep-alive组件中才会生效，即组件被缓存之后下次重新进入该组件时就会被触发（一但组件被缓存，下次进入就不会调用任何其他的生命周期函数，不包括update相关的两个），这个函数在SSR（服务端渲染）中不会被触发。
- onDeactivated： 这个函数只有在keep-alive组件中才会生效，即组件被页面中移除时就会触发（一旦使用缓存之后，组件移除时就不会再调用其他的生命周期函数），这个函数在SSR（服务端渲染）中不会被触发。
详细解读可以参考Vue官网：Vue3
(2).组件错误处理生命周期
errorCaptured（onErrorCaptured）函数：
errorCaptured函数是当捕获一个来自子孙组件的错误时被调用的函数。
错误会从以下的来源捕获：
- 组件渲染
- 事件处理器
- 生命周期钩子
- setup
- watch 侦听器
- 自定义指令钩子
- 过渡钩子
这个生命周期函数接收一个回调函数作为参数，并为回调函数传递三个参数：
- 错误对象
- 发生错误的组件实例
- 错误信息类型字符串(这个参数在生产环境中会有所变化)
- 可以在函数中返回false以阻止该错误继续向上传播。
注意： 默认情况下所有的错误都会被发送到应用级ap.config.errorHandler配置，并终止应用。
如果组件链上有多个errorCaptured钩子，则它们会以深度优先的顺序被调用。如果其中任何一个返回false，则剩下的钩子就不会被调用。这个过程就好像是原生dom事件中的事件冒泡。
(3).响应式数据更新和依赖触发生命周期
在Vue中最大的特点就是响应式数据，Vue官方提供了两个生命周期函数会在数据改变以及页面更新时来执行，方便开发者来执行一些自己的逻辑。
- **onRenderTracked（dev only）：**这个函数会在组件渲染时如果追踪到响应式对象时就会被调用,这个函数仅能在开发环境下使用，且如果使用服务器端渲染（SSR）也不会被触发。
- **onRenderTriggered（dev only）：**这个函数会在响应式对象对应的依赖被触发时调用，这时就相当于是响应式对象数据变化了并且触发了组件的更新。仅在开发环境使用。
(4).SSR专有生命周期
- onServerPrefetch（ssr only) 这个函数会在组件在服务器端渲染时被调用,如果这个函数返回一个promise，则ssr渲染时就会等待这个promise完成之后才会渲染。
4.在created和mounted中请求数据有什么区别
(1) created
在created阶段，组件实例已经创建完成，但是组件的DOM结构还没有生成，所以无法操作DOM，但是可以访问data中的数据,这个时候请求数据相对来说比较早，对后续DOM渲染没有影响。
(2) mounted
在mounted阶段，组件实例已经创建完成，并且组件的DOM结构已经生成，可以操作DOM，这个时候请求数据相对来说比较晚，后续将数据渲染到页面上是可能会闪屏，如果请求的数据较多，对性能有一定的影响。
(3) 总结
如果说请求的数据在后续dom需要渲染或者需要较早渲染，一般在created中请求数据，如果请求的数据在后续dom不需要渲染，则可以在mounted中请求数据。
5.vue中修饰符有哪些
1. 事件修饰符
Vue 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。这些修饰符可以改变事件监听器的部分性质，比如阻止默认行为，阻止事件冒泡等等。
常见的修饰符有：
| 修饰符 | 描述 |
|---|---|
| .stop | 调用 event.stopPropagation()，停止事件冒泡 |
| .prevent | 调用 event.preventDefault()，阻止默认行为 |
| .capture | 添加事件侦听器时使用 capture 模式 |
| .self | 只当事件是从侦听器绑定的元素本身触发时才触发回调 |
| .once | 事件将只会触发一次 |
| .left | (2.2.0) 只当点击鼠标左键时触发 |
| .passive | (2.3.0) 以 { passive: true } 模式添加侦听器 |
2. 按键修饰符
在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。
一般常用的键盘修饰符事件
| 修饰符 | 描述 |
|---|---|
| .enter | 按下回车键 |
| .tab | 按下Tab键 |
| .delete | 按下删除键(捕获“Delete”和“BackSpace”键) |
| .esc | 按下ESC键 |
| .space | 按下空格键 |
| .up | 按下上键 |
| .down | 按下下键 |
| .left | 按下左键 |
| .right | 按下右键 |
3.系统按键修饰符
除了以上按键修饰符外，Vue 还提供了系统按键修饰符。
| 修饰符 | 描述 |
|---|---|
| .ctrl | 只有按下 Ctrl 键时触发 |
| .alt | 只有按下 Alt 键时触发 |
| .shift | 只有按下 Shift 键时触发 |
| .meta | 只有按下 Meta(Windows徽标) 键时触发 |
这些修饰符即可以和鼠标事件一起使用，也可以和键盘事件一起使用。
在mac电脑上，meta键是command键，windows徽标键是window键。
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>
.exact 修饰符
.exact 修饰符允许精确控制触发事件所需的系统修饰符的组合。
<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>
4. 鼠标按钮修饰符
鼠标按钮修饰符只能用于鼠标事件。
| 修饰符 | 描述 |
|---|---|
| .left | 左键 |
| .right | 右键 |
| .middle | 中键 |
<!-- 仅当点击鼠标左键时触发 -->
<button @click.left="onClick">A</button>
5. v-model修饰符
v-model 指令的默认行为是当用户输入时将输入的值同步到数据中，但有时我们可能想要在每次 input 事件触发后进行一些操作，这时可以使用一些修饰符来实现。
| 修饰符 | 描述 |
|---|---|
| .lazy | 将 input 事件转变为 change 事件 |
| .number | 将用户输入自动转为数值类型，如果输入值潍无法被parseFloat解析，就会返回原值，且在输入框设置为type="number“ 时自动使用 |
| .trim | 自动过滤用户输入的首尾空格 |