Vue 基础面试题, 在 .vue 文件中,style 和 script 必须要写么?为什么?
Vue 基础面试题, 在 .vue 文件中,style 和 script 必须要写么?为什么?
QA
Step 1
Q:: 在 .vue 文件中，style 和 script 必须要写么？为什么？
A:: 在 .vue 文件中，style 和 script 并不是必须要写的。Vue 文件的结构是分为三个部分：template、script 和 style。template 部分定义了组件的模板结构，script 部分定义了组件的逻辑，style 部分定义了组件的样式。在某些情况下，如果一个组件没有特殊的逻辑操作或者样式，可以只包含 template 部分。但是在实际开发中，大多数组件都会包含至少 script 部分来处理组件的行为。
Step 2
Q:: .vue 文件中可以包含多个 <template>、<script> 或 <style> 标签吗？为什么？
A:: .vue 文件中只能包含一个 <template> 和 <script> 标签，因为 Vue 文件是单文件组件，每个组件都有明确的结构，只能有一个模板和一个逻辑定义。<style> 标签可以有多个，这样可以用于定义不同的样式作用域（如 scoped 样式和全局样式）。
Step 3
Q:: 在 Vue 组件中，<style scoped> 是什么？有什么用？
A:: <style scoped> 用于在 Vue 组件中定义只作用于当前组件的样式。通过 scoped，样式规则只会应用到当前组件的元素上，而不会影响到其他组件。Vue 通过给组件的 HTML 元素添加唯一的属性选择器实现 scoped 样式的隔离。
Step 4
Q:: 在 Vue 中如何实现组件间的通信？
A:: 在 Vue 中，组件间的通信可以通过以下几种方式实现：1) 父子组件通信：通过 props 向子组件传递数据，子组件通过 $emit 向父组件发送事件；2) 兄弟组件通信：可以通过使用 Vuex 或者一个事件总线（EventBus）实现；3) 跨级组件通信：可以使用 provide 和 inject 直接在祖先组件和后代组件之间共享数据。
Step 5
Q:: Vue 中的生命周期钩子是什么？常用的生命周期钩子有哪些？
A:: Vue 的生命周期钩子是指在组件的不同阶段（如创建、挂载、更新、销毁）自动调用的函数。常用的生命周期钩子包括：1) created：实例创建完成，但还未挂载；2) mounted：实例被挂载到 DOM 上；3) updated：数据更新导致的 DOM 更新完成；4) destroyed：实例销毁完成。