中国银行前端开发vue面试题（vue面试题大全）

本文目录

• vue面试题大全
• 前端面试题（十五）

vue面试题大全

1. vue生命周期都有哪些？

2. 进入页面会执行哪些生命周期函数
beforeCreate、created、beforeMounted、mounted

3. 在哪里可以访问 data
beforeCreate中不可以访问
created中有 el
beforeMounte中有 el
mouted中都有，包括之后的生命周期钩子函数都有

4、 如果加入了keep-alive会增加两个生命周期函数
activated和deactivated
进入页面的时候触发activated，离开页面触发 deactivated
5. 如果加入keep-alive组件，第一次进入页面会触发哪些生命周期
beforeCreate、created、beforeMounted、mounted、activated
6、 如果加入了keep-alive组件后，第二次或第n次进入页面会触发哪些生命周期？
只触发一个生命周期：activated(因为该页面已经被缓存起来了)

1.是什么
vue自带的一个组件，用来缓存组件，提升性能，keep-alive可以在组件切换时，保存其包裹组件的状态，使其不被销毁。
2、参数
include：表示只有匹配的组件才会被缓存；
exclude：表示匹配到的组件不会被缓存；
3、生命周期
有两个生命周期函数，同上
4.使用场景
-列表页面跳转详情页的时候，用户通过点击跳转，那么详情页每次都要去请求数据，如果用户每次点击的都是同一个，那么详情页就没必要去重新请求，直接缓存起来就行了，如果点击的不是同一个再重新发起请求；
-在router-view上使用可以缓存路由组件；

1.相同点
都可以控制元素的显示隐藏
2.区别
v-if通过创建/销毁dom元素来控制元素的显示隐藏，v-show通过css属性的display:none来控制元素的显示隐藏
3.场景
频繁切换使用v-show，会节省性能，反之使用v-if

1、当项目使用keep-alive时，可搭配组件name进行缓存过滤
当我们使用keep-alive缓存组件时，被缓存组件中的mounted函数只会执行一次，第二次进入页面不会重新触发，有两种解决方法，一种是使用activated()，在里面进行mounted中的操作；另一种就是在keep-alive中增加一个过滤，如下所示：

exclude属性就是要忽略匹配到的组件。
2、DOM做递归组件时；
当组件需要自己调用自己的时候

3、使用vue-tools时；
vue-devtools调试工具里显示的组件名称是由vue中组件name决定的

v-for的优先级比v-if的优先级高，这是在源码中规定好的，并且v-for和v-if不可以同时使用，同时使用会很浪费性能，比如明知判断条件是false的情况下，还需要去遍历一下数据，所以通常我们会把v-if放在v-for的外面。

是用来获取更新后的dom内容，并且该方法是异步的

作用是将回调函数延迟到下次dom更新循环之后执行因为vue更新数据是异步的，修改data中的数据，视图不会立刻更新，vue会将你对data的修改放到一个watch队列中，当同一事件循环中的所有数据更新完以后，再进行试图更新，所以会产生延迟。
最常见的使用场景就是，在created中获取dom元素的时候需要使用$nextTick获取

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，相当于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。

当父组件给子组件传递数据的时候，子组件只允许对数据进行读取，不允许修改数据，因为当子组件修改了父组件传过来的数据时，其他引用父组件数据的组件也会被修改，从而导致报错，然而也不知道是当前组件报错还是父组件报错还是修改父组件信息的子组件的错误；

如果要修改可以通过this.$emit方法派发自定义事件，在父组件中修改；

hash模式和history模式，默认是hash模式
区别如下：
1、表现形式不同，hash使用#表示，history用/表示；
2、hash值不会发送到服务端，history会发送到服务端 ，如果没有匹配到对应的路由，需要配置对应的页面；
3、获取方式不同，hash值可以通过location.path获取，history通过location.pathname获取；
4、hash可以通过window.onhashchange监听hash值的改变 ，history
可以通过onpopstate监听变化；

组建中的template标签会编译为render函数，通过render函数创建出dom元素，然后转化为虚拟dom最终转化为真实dom

1、虚拟dom是一个js对象，用对象属性来描述节点，是一层对真实dom的抽象

2、因为dom的执行速度远不如js执行速度快，因此将真实的dom抽象成js对象，然后通过算法计算出真正需要更新的节点，从而减少了大量的dom操作。
3、将直接操作dom转换成了两个js对象中去比较，找出差异项，做局部更新，提高了执行效率。

未完待续...

前端面试题（十五）

已知高度和宽度的元素：

设置父元素为相对定位relative，给子元素设置绝对定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

未知高度和宽度的元素：

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translate(-50%，-50%);

设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform:translate(-50%，-50%);

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。

for of：

支持 return ，并且是值 of 数组（不能遍历对象）
1. 可以避免所有 for-in 循环的陷阱
2. 不同于 forEach()，可以使用 break, continue 和 return
3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4. 它也支持字符串的遍历
5. for-of 并不适用于处理原有的原生对象

for in：

forEach：

assets文件夹里是静态资源；components是放组件；router是定义路由相关的配置；view视图；app.vue是一个应用主组件；main.js是入口文件

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

生命周期函数： activated（ 组件激活时调用 ）、deactivated（ 组件停用时调用 ）

常见的使用场景可以分为三类:

当频繁执行条件时，不适合使用 v-if ,用 v-show ;
反之执行条件的次数很少，使用 v-if 即可。

v-if 和 v-for ,不推荐两者一起使用在同一个元素上，虽然也能运行，但是器会报警告；两者一起使用时，v-for比v-if具有更高的优先级，