2021年Vue.js面试题解析

数据绑定

问：Vue.js 中如何实现数据绑定？

答： Vue.js 使用 v-model 指令实现双向数据绑定。对于表单元素，v-model 会自动选择正确的更新方式。

<input type="text" v-model="message"/>

组件通信

问：Vue.js 中常用的组件通信方式有哪些？

答：

  • Props & Events: 父组件通过 props 向子组件传递数据，子组件通过 events 向父组件发送消息。
  • Vuex: 用于大型应用的状态管理，实现组件间的数据共享和同步。
  • Provide/Inject: 允许祖先组件向所有后代组件注入依赖。
  • \$attrs & \$listeners: 用于多层级组件通信，传递属性和事件监听器。

生命周期

问：简述 Vue.js 组件的生命周期钩子函数。

答：

  • beforeCreate: 实例初始化之前。
  • created: 实例创建完成后。
  • beforeMount: 模板编译之前。
  • mounted: 模板编译完成后，挂载到 DOM 上。
  • beforeUpdate: 数据更新之前。
  • updated: 数据更新之后。
  • beforeDestroy: 实例销毁之前。
  • destroyed: 实例销毁之后。

计算属性与监听器

问：计算属性和监听器的区别？

答：

  • 计算属性 (computed): 基于依赖缓存，只有依赖项发生变化时才会重新计算。适用于需要对数据进行复杂处理的场景。
  • 监听器 (watch): 监测数据的变化，并在数据发生变化时执行回调函数。适用于需要在数据变化时执行异步操作或其他副作用的场景。

虚拟 DOM

问：Vue.js 中虚拟 DOM 的作用是什么？

答： 虚拟 DOM 是真实 DOM 的 JavaScript 对象表示，Vue.js 通过对比新旧虚拟 DOM 的差异，只更新需要改变的部分，从而提高页面渲染效率。

其他

问：你对 Vue3 的了解有哪些？

答： Vue3 引入了 Composition API、Teleport、Fragments 等新特性，同时在性能和可维护性方面都有所提升。

总结

以上只是一些常见的 Vue.js 面试题，实际面试中可能会根据不同的公司和职位有所变化。建议在准备面试时，结合自身情况和目标职位，深入学习相关知识点。