面试中精选高频Vue面试题_vue高级前端面试题

2401_84436095

于 2024-04-27 15:46:37 发布

阅读量668

点赞数 9

文章标签：前端面试 vue.js

本文链接：https://blog.csdn.net/2401_84436095/article/details/138251177

版权

本文概述了Vue.js中的关键概念，如数据变化回调、条件渲染（v-if/v-show）、数据绑定(v-model)、组件生命周期、父子组件通信方式、单向数据流、Vue的diff算法以及Vuex和VueRouter的使用。对于面试者和开发者来说，这是理解和掌握Vue开发的基础知识点。

摘要由CSDN通过智能技术生成

监听到的数据变化对应的回调函数，处理数据，反馈给view层跟新。

3.v-if 和v-show

区别在于是控制DOM节点的存在还是设置css的样式。
v-if在切换过程中会伴随着DOM元素的生成和销毁，在过程中会重建和销毁事件监听等。

编译角度： v-if是惰性的如果是假值则不编译只有在条件为真值时才编译 v-show是在任何情况下都编译的

4.v-for 和v-if的优先级

首先这里官网是不建议一起使用的，在vue源码中判断 for 的优先级是高于 if的
如果要同时使用，建议在for外嵌套一层if以达到效果

5.data中为什么必须是一个函数

反向思考一下如果data是一个对象的话，在组件引入过程中，其实都是在操作同一个对象，由于组件的共享，data也在共享，所以data需要用函数返回一个对象的独立拷贝，以保持数据解耦。

6.v-model的原理

v-model 是vue双向绑定的指令。可以将页面输入的值同步更新到相关绑定的data属性上，也会在data属性更新时，更新页面控件的值。这里可以详见双向绑定的原理，问v-model的原理即是问complie指令解析器的过程。

7.computed watch 和 method

首先method 有点特殊可以不横向比较它主要用于定义函数并且需单独调用

computed 和 watch 中主要的差别在于 computed 有缓存性且依赖于其他的值只有依赖的值发生变化的时候
computed的值才会重新计算。 watch 则没有缓存性起到观察作用监听数据变化进行异步操作

8.vue生命周期

create mount update destroy 四个主要的生命周期而衍生出 before xxx xxxed 两种共八个生命周期。

比较重要的几个生命周期：
created ：初始化某些值，避免undefined
mounted：对html节点进行dom操作

9.父子组件的生命周期顺序

创建实例是从外到内的，更新和销毁过程是由内到外的

mounted 结束后可以操作dom节点所以说子组件的mouted一定是先于父组件的

加载渲染过程：
father beforeCreate
father created
father beforeMount
son beforeCreate
son create
son beforeMount
son mounted
father mounted

更新过程：
father beforeUpdate
son beforeUpdate
son Updated
father Updated

销毁过程：
father beforeDestory
son beforeDestory
son destoryed
father destoryed

10.组件间传值

父传子：props，子传父：$emit，非父子组件：bus事件总线法。

bus事件总线法的步骤：
首先创建一个bus的vue实例中间件
在需要通信的组件中都引入这个中间件
利用$emit和$on进行发送和接收

11.单向数据流

易于控制，流向简单易于跟踪，子组件不会影响父组件的值

12.keep-alive

使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

13.vue中key的作用

key的主要作用是高效的更新虚拟DOM
其原理是vue在patch过程中通过key可以精准的判断两个vnode节点是不是同一个，从而避免频繁更新不同元素，让整个过程更加高效，减少DOM操作量，提高性能。

不设置key可能会在列表更新时引发bug

14.vue中diff算法

详见diff算法分析博客

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…