Vue面试题

Vue面试题

以下是一些常见的Vue面试题以及它们的答案：

1. Vue中的生命周期钩子函数有哪些？它们的顺序是怎样的？

答案：Vue中的生命周期钩子函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。它们的顺序如下：

• beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。
• created：在实例创建完成后调用，此时已经完成了数据观测和事件配置。
• beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。
• mounted：el被新创建的vm.$el替换，并挂载到实例上后调用该钩子函数。
• beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：实例销毁后调用，此时所有的事件监听器被移除，所有的子实例也被销毁。

2. Vue中的计算属性和监听属性有什么区别？

答案：计算属性是基于它们的依赖进行缓存的，只有当依赖发生改变时才会重新计算。计算属性适合用于处理复杂的逻辑计算。而监听属性则是通过watch选项来实现对数据的监听，当被监听的数据发生变化时，会触发相应的回调函数。监听属性适合用于观察和响应特定数据的变化。

3. Vue组件间的通信方式有哪些？

答案：Vue组件间的通信方式有以下几种：

• 父子组件通信：通过props将数据从父组件传递给子组件，子组件通过触发事件将数据传递回父组件。
• 子父组件通信：子组件通过$emit触发自定义事件，并通过$on在父组件中监听该事件，从而将数据传递给父组件。
• 兄弟组件通信：可以通过共同的父组件作为中介，将数据通过props和$emit传递给兄弟组件。
• 跨级组件通信：可以使用provide/inject来进行跨级组件通信。父级组件通过provide提供数据，子孙组件通过inject来注入数据。

4. Vue的路由导航守卫有哪些？它们的执行顺序是怎样的？

答案：Vue的路由导航守卫包括beforeEach、beforeResolve、afterEach和beforeRouteEnter。它们的执行顺序如下：

• beforeEach：在路由切换开始之前调用，可以用来进行全局的权限控制或路由拦截。
• beforeResolve：在路由切换开始之前和异步组件被解析之后调用，用来确保异步组件已经被解析。
• afterEach：在路由切换完成之后调用，可以用来进行全局的后置处理。
• beforeRouteEnter：在路由切换开始之前调用，但是在组件被创建之前调用，因此在这个守卫中无法直接访问组件实例，可以通过回调函数的参数访问组件实例。

5. Vue中的key属性有什么作用？

答案：Vue中的key属性用于给Vue的v-for列表项添加唯一标识。当列表发生变化时，Vue会根据新旧列表的key值的对比，复用已有的DOM元素或创建新的DOM元素。如果没有提供key属性或key属性不唯一，Vue会使用一种“就地复用”的策略，可能会导致出现意料之外的渲染结果或状态错误。使用key属性可以提高列表渲染的性能和效果。