前端面试题（Vue篇）

1.Vue父组件如何向子组件传递数据？

• 通过props属性。在父组件中定义props，然后在子组件中使用props来接收这些值。

2.子组件如何向父组件传递事件？

• 使用$emit方法。子组件可以通过$emit触发一个自定义事件，并传递数据给父组件。父组件在模板中监听这个事件并处理。

3.v-show和v-if指令的共同点和不同点是什么？

• 共同点：两者都可以控制元素的显示和隐藏。
• 不同点：v-show是通过修改元素的CSS样式（display属性）来控制显示和隐藏，元素始终存在于DOM中；而v-if则是根据表达式的真假值来动态地添加或删除元素，若初始值为false，则元素不会被编译到DOM中。因此，v-if有更高的初始渲染开销，但切换开销较小；而v-show则相反。

4.Vue中如何获取DOM？

• Vue推荐我们尽量不去直接操作DOM，而是通过数据和视图之间的映射关系来间接操作DOM。但如果你确实需要获取DOM，可以使用ref属性给元素添加一个引用，然后在Vue实例中通过this.$refs来访问这个元素。

5.v-model是什么？它的优点是什么？

• v-model是Vue中实现表单元素和组件双向数据绑定的指令。它的优点在于简化了表单元素和Vue实例之间数据的同步过程，使得数据在视图和模型之间能够自动更新。

6.如何理解“单向数据绑定”和“双向数据绑定”？

• 单向数据绑定是指数据从数据源单向地传输到视图，当数据源变化时，视图会自动更新；但视图的变化不会影响到数据源。Vue中的props就是单向数据绑定的例子。
• 双向数据绑定则是指数据和视图之间的双向通信。当数据变化时，视图会自动更新；同时，当视图中的数据发生变化时（如用户输入），数据也会自动更新。Vue中的v-model就是双向数据绑定的例子。

7.Vue的生命周期钩子有哪些？它们分别在什么阶段被调用？

• Vue的生命周期钩子包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等。这些钩子在Vue实例的不同阶段被调用，用于执行一些特定的操作或逻辑。

8.什么是Vue的计算属性（computed properties）？

• 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。