Vue面试题（B站视频笔记）

Vue: 从基础到实战

Vue 简介

Vue.js 是一个渐进式 JavaScript 框架，专用于构建用户界面。它采用数据驱动视图的理念，这意味着数据变化时，视图也会随之更新。Vue 由其简洁、灵活性以及易于学习的特性而受到欢迎。

Vue 核心概念

• 组件： Vue 中的基本构建模块，包含自己的模板、数据和方法。组件可以嵌套使用，形成更复杂的应用程序。
• 数据绑定： 将数据与视图元素连接，当数据更改时，视图也会更新。
• 指令： 扩展 Vue 的内置功能，用于操作 DOM 元素，例如显示隐藏元素或遍历数组。
• 生命周期： Vue 实例的生命周期，从创建到销毁，有明确的阶段和钩子函数，允许开发者在每个阶段执行自定义操作。
• 过滤器： 将数据进行格式化或转换，例如将时间戳转换为日期字符串。

Vue 生命周期

Vue 生命周期分为 8 个阶段：

• beforeCreate： 实例被创建但尚未初始化。
• created： 实例已创建，但尚未挂载到 DOM 中。
• beforeMount： 实例准备挂载到 DOM 中。
• mounted： 实例已挂载到 DOM 中，可以通过 DOM 元素进行交互。
• beforeUpdate： 数据更新前触发。
• updated： 数据更新后触发。
• beforeDestroy： 实例即将销毁。
• destroyed： 实例已销毁。

Vue 指令

Vue 内置了多种指令，用于操作 DOM 元素：

• v-if： 控制元素的显示和隐藏。
• v-for： 遍历数组并为每个元素生成元素。
• v-model： 实现双向数据绑定，在输入框中输入内容时更新数据，反之亦然。
• v-bind： 将属性绑定到数据，从而动态更新元素属性。
• v-on： 为事件处理程序绑定事件。

Vue 组件

组件是 Vue 中的可重用代码块，具有以下优点：

• 可重用性： 组件可以被多次使用，提高代码的可维护性。
• 可维护性： 组件隔离了代码，使应用程序更容易维护。
• 可测试性： 组件可以独立测试，提高测试覆盖率。

Vue 路由

Vue 路由允许我们在应用程序的不同页面之间导航。它通过 vue-router 插件实现，提供了以下功能：

• 嵌套路由： 创建嵌套的路由层次结构，实现复杂导航。
• 重定向： 在特定条件下重定向到其他路由。
• 路由守卫： 在导航之前或之后执行操作，例如权限检查。

Vue 状态管理

Vue 状态管理通过 Vuex 插件实现，它提供了一个集中式存储，管理应用程序的状态：

• 状态： 应用程序的数据。
• 提交： 更改状态的请求。
• 突变： 实际更改状态的操作。
• 操作： 提交和突变之间的桥梁。
• 模块： 将状态、提交、突变和操作组织成模块。

代码示例

// 实例化 Vue 实例
const app = new Vue({
  // 组件配置
  components: {
    MyComponent: {
      // 模板
      template: '<div>这是我的组件</div>'
    }
  },
  // 数据
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  // 生命周期钩子
  created() {
    console.log('实例已创建');
  },
  // 指令
  directives: {
    myDirective: {
      // 自定义指令
      bind(el, binding, vnode) {
        el.style.color = binding.value;
      }
    }
  }
});

// 使用组件
app.$mount('#app');

常见问题解答

• Vue 和 React 有什么区别？ Vue 和 React 都是流行的 JavaScript 框架，但 Vue 采用数据驱动视图，而 React 采用虚拟 DOM。
• 为什么选择 Vue？ Vue 因其简洁、灵活性、易学性和强大的生态系统而受到欢迎。
• Vue 中组件的最佳实践是什么？ 保持组件小而专注，避免过度嵌套，并考虑使用单一职责原则。
• 如何调试 Vue 应用程序？ 使用 Vue 开发工具或 vue-devtools，查看组件层次结构、数据和事件。
• Vue 的未来是什么？ Vue 继续保持其在开发人员中的受欢迎程度，并随着新功能和改进的发布不断发展。