vue面试题四

一、请解释v-show和v-if指令的区别？

v-show 和 v-if 是 Vue.js 中用于控制元素显示与隐藏的两个常用指令，但它们的工作方式和性能表现有所不同。以下是它们之间的主要区别：

1. 工作原理

• v-if：

  • v-if 是“真实”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  • 如果条件为假，则什么也不做，直到条件第一次变为真时，才开始渲染条件块。
  • 当条件为假时，元素及其子元素都不会被渲染到 DOM 中。

• v-show：

  • v-show 指令只是简单地基于 CSS 进行切换。
  • 无论初始条件是什么，元素始终都会被渲染到 DOM 中，并且只是简单地基于 CSS 进行显示与隐藏。
  • v-show 是通过修改元素的 display CSS 属性来实现显示与隐藏的。

2. 初始渲染

• v-if 在初始渲染时，如果条件为假，则不会渲染该元素及其子元素。
• v-show 则会渲染元素，但会将其隐藏（通过 CSS 的 display: none）。

3. 切换开销

• v-if 有更高的切换开销，因为它在条件改变时可能会涉及到组件的销毁和重建。
• v-show 的切换开销较小，因为它只是简单地切换 CSS 属性。

4. 使用场景

• v-if 适用于在运行时条件不太可能改变的情况，或者条件改变时，组件需要被销毁和重建的情况。
• v-show 适用于频繁切换显示与隐藏的情况，因为它的开销较小。

5. 与 v-else、v-else-if 的配合

• v-if 可以与 v-else 和 v-else-if 一起使用，以表示多个条件分支。
• v-show 则不支持这种用法。

6. 性能考虑

• 如果你需要频繁切换元素的显示与隐藏，并且元素包含大量的数据或子组件，那么使用 v-show 可能会更加高效。
• 如果你只需要在条件首次为真时渲染元素，并且元素可能包含大量数据或子组件，那么使用 v-if 可能会更加合适，因为它可以避免不必要的渲染和销毁开销。

二、如何使CSS只在当前Vue组件中起作用？

在Vue中，通常我们使用

在这个例子中，.example类只会应用到当前组件中。

3. 使用 CSS Modules

Vue也支持CSS Modules，它可以将类名编译成唯一的标识符，以防止在全局范围内发生冲突。要使用CSS Modules，你需要在

在这个例子中，.example类名会被编译成一个唯一的标识符，只会在当前组件中生效。注意，你需要在模板中使用:class="$style.example"来引用这个类名。

总的来说，如果你想要确保CSS样式只在当前Vue组件中起作用，最好的做法是使用scoped属性或CSS Modules。