前端基础面试题·第四篇——Vue（其一）

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) 使用场景

1. 如果需要频繁切换元素的显示状态，建议用v-show。避免频繁的操作DOM元素，减少性能开销。
2. 如果元素需要控制元素的创建与销毁，则使用v-if。

2.v-for中的key属性

(1) key属性

• key属性是Vue中v-for指令中使用时必须为绑定元素设置的一个属性，用于标识列表中的每个元素，从而实现列表的更新与删除。
• 本质上vue在底层渲染时，会通过key属性来判断前后两次渲染是否是同样的元素，如果key值相同且元素type也相同就会认为元素本身前后两次没有变化，从而就只会更新元素的props和conetnt，不会销毁重重建元素，避免了多余的dom操作，减少性能消耗。
• 在v-for中如果列表的元素需要动态操作，测最好是将key值设置为一个唯一的值，这样在渲染时就会判断更准确。

(2) 作用

1. 提高虚拟dom的更新。
2. 提高列表的更新与删除效率。
3. 避免不必要的多月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 侦听器
• 自定义指令钩子
• 过渡钩子

这个生命周期函数接收一个回调函数作为参数，并为回调函数传递三个参数：

1. 错误对象
2. 发生错误的组件实例
3. 错误信息类型字符串(这个参数在生产环境中会有所变化)
4. 可以在函数中返回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	自动过滤用户输入的首尾空格