Vue面试题

2024-01-07 19:15:57

Vue面试题

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

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

答案:Vue中的生命周期钩子函数包括beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed。它们的顺序如下:

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

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

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

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

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

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

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

答案:Vue的路由导航守卫包括beforeEachbeforeResolveafterEachbeforeRouteEnter。它们的执行顺序如下:

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

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

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

文章来源:https://blog.csdn.net/qq_42431718/article/details/135441250
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。