一、请解释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中，通常我们使用<style>标签在组件内部编写CSS样式，这样这些样式只会应用到当前的Vue组件。为了实现这一点，你需要在组件的.vue文件中编写<style>标签，并确保没有添加scoped或module属性以外的特殊属性，或者明确地使用scoped或module属性来确保样式的局部性。

1. 使用 <style> 标签默认情况

如果不加任何特殊属性，CSS样式将会应用到整个项目。但是，如果你将CSS样式写在一个.vue组件文件的<style>标签内，并且没有其他的全局样式影响到这个组件，那么这些样式通常只会在当前组件中起作用。然而，这并不是一个安全的做法，因为其他全局样式仍然可能影响到这个组件。

2. 使用 scoped 属性

Vue提供了一个scoped属性，可以添加到<style>标签上，以使得该样式仅对当前组件生效。这是通过在元素的类名后添加唯一的属性名（例如[data-v-f3f3eg9]）来实现的。这样，即使你在其他组件中使用了相同的类名，也不会影响到这个组件的样式。

<style scoped>
.example {color: red;
}
</style>

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

3. 使用 CSS Modules

Vue也支持CSS Modules，它可以将类名编译成唯一的标识符，以防止在全局范围内发生冲突。要使用CSS Modules，你需要在<style>标签上添加module属性。然后，在模板和脚本中，你需要通过$style对象来引用这些类名。

<template><div :class="$style.example">Hello World</div>
</template><style module>
.example {color: red;
}
</style>

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

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