vue面试题

151 阅读5分钟

# 1.v-show和v-if的区别

1.实现本质方法区别

v-show本质就是标签display设置为none,控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

2.编译的区别

v-show其实就是在控制css

v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

3.编译的条件

v-show都会编译,初始值为false,只是将display设为none,但它也编译了

v-if初始值为false,就不会编译了

4.性能

v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。

# 2.v-for中key的作用

  1. 提升v-for渲染的效率

2. 提高渲染性能

3.避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)

# 3.vue中data为什么是function

每个组件都是 Vue 的实例, 为了独立作用域, 不让变量污染别人的变量

# 4.vue中双向绑定的原理

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

  • V(修改视图) -> M(数据自动同步)
  • M(修改数据) -> V(视图自动同步)

# 5.keep-alive的作用和被keep-alive声明的组件的声明周期

作用:Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染

生命周期函数:在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated。

1、activated钩子:在在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用。

2、Activated钩子调用时机: 第一次进入缓存路由/组件,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用,并且给因为组件被缓存了,再次进入缓存路由、组件时,不会触发这些钩子函数,beforeCreate created beforeMount mounted 都不会触发

  1. 1、deactivated钩子:组件被停用(离开路由)时调用。

  2. 2、deactivated钩子调用时机:使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了,这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

# 6.vue的生命周期,以及生命周期都做什么事情

Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

1.beforeCreate

在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2.created

在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

3.beforeMount

在挂载开始之前被调用:相关的 render 函数首次被调用。

4.mounted

el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.el 也在文档内。

5.beforeUpdate

数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

6.updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

7.activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8.deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9.beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10.destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11.errorCaptured(2.5.0+ 新增)

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

# 7.vue什么时候操作DOM比较合适?操作发现有的组件获取不到怎么办?

在 mounted 中可以访问操作 DOM。

在获取页面元素的外层套上this.$nextTick

# 8.发送网络请求在哪个函数中?

Axios

# 9.vue组件传值有哪些方式

父组件向子组件进行传值:

子组件向父组件进行传值:

相邻兄弟组件间进行传参(亲兄弟)

远兄弟传参(表兄弟)

EventBus传参

# 10.vue中改变数组内索引的值,数据不更新,如何处理

1:静默刷新(使用v-if的特性)

2:Vue.$set(官方推荐)

3:Vue.$forceUpdate(手动强制更新视图)

4:Object.assign(使用修改栈能触发视图更新的特性,借鉴React的写法)

# 11.讲一下vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

vue的钩子函数

vue的钩子函数有好几类

一、生命周期钩子函数

  (1)beforeCreate()       实例创建前触发

  (2)created()                实例创建完成,

  (3)beforeMount()        模板渲染前,可以访问数据,模板编译完成,虚拟DOM已经存在

  (4)mounted()              模板渲染完成,可以拿到DOM节点和数据

  (5)beforeUpdate()      更新前

  (6)updated()               更新完成

  (7)activated()           激活前

  (8)deactivated()         激活后\

  (9)beforeDestroy()  销毁前

  (10)destroyed()    销毁后

 

二、自定义指令directives的钩子函数

  (1)bind()         绑定指令到元素上,只执行一次。

  (2)inserted()   绑定了指令的元素插入到页面中展示时调用,很常用。

  (3)update()  所有组件节点更新时调用

  (4)componentUpdated    指令所在的节点及其子节点全部更新完成后调用。

  (5)unbind()    解除指令和元素的绑定,只执行一次。

 

 

三、路由导航 / 路由守卫  钩子函数

  (1)全局守卫

    ①前置:router.beforeEach((to,from,next)=>{  })

    ②后置:router.afterEach((to,from)=>{  })

  (2)路由独享守卫

    beforeEnter:(to,from,next)=>{   }

  (3)导航守卫

    ①beforeRouteEnter(to,from,next){   }

    ②beforeRouteLeave(to,from,next){