前端面试题:Vue

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()中销毁,否则可能造成内存泄漏

  合理使用异步组件

 

猜你喜欢

转载自www.cnblogs.com/guisenbin/p/12339724.html