前端面试题：Vue

Posted 2021-03-08 guisenbin

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

　　v-show通过CSS的display控制显示和隐藏

　　v-if组件是真正的渲染和销毁，而不是显示和隐藏

　　频繁切换显示状态用v-show，否则用v-if

2.为何在v-for中用key(不用会报错)

　　必须用key，且不能是index和random

　　diff算法中通过tag和key来判断是不是sameNode(相同节点)

　　减少污染次数，提升渲染性能

3.vue中生命周期

　　挂载 beforeCreate created 并没有开始渲染，但vue的实例已经初始化完成了

    　　　 beforeMount  mounted 已经开始渲染

　　更新 beforeUpdate updated

　　销毁 beforeDestroy destroyed 解除绑定的自定义事件 setTimeOut定时任务等

　　<父子组件>生命周期

　　父created → 子created → 子mounted → 父mounted

　　创建初始化Vue的实例是从外到内，渲染是从内到外(只有把子组件渲染完才是父组件)

　　父beforeUpdate → 子beforeUpdate → 子updated → 父updated

4.Vue组件如何通讯/参数传递

　　父传子：props;  子传父：this.$emit

　　自定义事件：event.$on绑定  event.$emit触发  event.$off解绑

　　eventBus创建一个事件中心，相当于中转站，用它来传递事件和接收事件。

　　大项目：Vuex

　　* 自定义事件要及时在beforeDestroy()中销毁，否则可能造成内存泄漏

5.双向数据绑定v-model的实现原理

　　采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()实现

　　一般v-model放在input中，input元素的value=this.name(变量data)

　　绑定input事件 this.name = $event.target.value(赋值给this.name)

　　data更新会触发re-render

6.Computed有何特点

　　计算结果会被缓存，data不变就不会重新计算；提高性能

7.ajax请求应放在哪个声明周期

　　mounted中，在数组渲染完成之后

　　因为JS是单线程，ajax是异步获取数据，放在眸之前没什么用，只会让逻辑更混乱

8.如何将组件所有的props传递给子组件

　　$props <User v-bind=“$props”/>

　　* 组件中所有的属性不分大小 不分多少时使用

9.多个组件有相同逻辑如何抽离

　　用mixin

　　但有缺点：①变量来源不能明，不利于阅读

           　　　　②多个mixin可能会造成命名冲突

         　　　　 ③mixin和组件可能会出现多对多关系，复杂性较高

10.何时使用异步组件？

　　①加载大组件时 ②路由异步加载时 组件名: () => import(‘../路径’) 在components中引入

11.何时需要使用keep-alive

　　缓存组件，不需要重复渲染时 如多个静态Tab页切换

12.何时需要使用beforeDestroy(不用的话可能会造成内存泄漏)

　　①解绑自定义事件 event.$off   ②消除定时器

　　③解绑自定义的DOM事件 如window.scroll等

13.Vuex中action和mutation有何区别

　　action中处理异步，mutation不可以

　　mutation做原子操作

　　action可以整合多个mutation的集合

14.如何配置vue-router异步加载

1 router：[
2     {
3         Path:’/’,
4         Component: () => import (‘../路径’)     
5     }
6 ] 

15.监听data的核心API是什么(vue3.0启用proxy，但有兼容性问题)

　　Object.defineProperty

　　有缺点： ①无法监听数组变化，需要特殊处理

        　　　　②深度监听需要递归到底，一次性计算量大

       　　　　 ③无法监听新增属性/删除属性 (vue.set  ver.delete)

16.Vue为何是异步渲染，$nextTick有什么用

　　异步渲染(以及合并data修改)以提高渲染性能

　　$nextTick在Dom更新后 触发回调，以获取最新的Dom节点(因为data改变后，Dom不会立刻渲染)

17.Vue常见性能优化方式

　　合理使用v-show v-if keep-alive

　　合理使用computed

　　v-for时加key，以避免和v-if同时使用

　　自定义事件 Dom事件，要及时在beforeDestroy()中销毁，否则可能造成内存泄漏

　　合理使用异步组件