Vue | 前端面试题总结篇

Canivores
1,308 阅读3分钟

Vue | 前端面试题总结篇

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

一、MVVM模型

●model->data数据

●view->dom模型，

●viewModel->视图模型，实例。相当于一个桥梁

二、Vue中响应式数据的理解

img

三、Vue如何检测数组变化

  • push：后面新增一个元素
  • pop：删除一个元素
  • shiftl：删除第一个元素
  • unshift：前面加一个元素
  • splice：指定位置删除/添加/替换一个元素
  • sort：数组进行排序
  • reverse：反转数组

四、Vue2组件生命周期有哪些？

  • beforeCreate():在实例初始化之后，event,watch事件之前
  • Created():可以访问到data数据，数据代理
  • beforeMount():解析模板，生成虚拟dom
  • Mounted():解析模板到真实dom,页面渲染
  • beforceUpdate()：数据更新，发生在虚拟dom
  • Update():真实dom，渲染到页面
  • beforceDestory:实例销毁前调用
  • Destory:实例销毁之后调用，调用后Vue实例的所有东西都会被解绑，所有的事件监听会被移除，子实例被销毁，该钩子在服务端渲染期间不被调用

看这篇 vue面试题之一：生命周期函数面试题

五、nextTick

this.$nextTick(回调函数)在下一次DOM更新结束后执行其指定的回调

什么时候用:当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

六、computed和watch的区别

  1. computed能完成的功能,watch都可以完成。

    • 定义:要用的属性不存在，需要通过已有属性计算得来
    • 底层借助了0bjcet.defineproperty()方法提供的 getter和setter

  1. watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。

    • watch是监控值的变化，当值发生改变的时候，会调用回调函数

七、说明key的作用和原理

  • 没有key会导致更新的时候出问题
  • 尽量不要采用索引作为key

面试题: react vue中的key有什么作用? (key的内部原理)

  1. 虚拟DOM 中key 的作用: key是虚拟DOM中对象的标识，当数据发生变化时，Vue 会 根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较， 比较规则如下：

  1. 对比规则

    1. 旧虚拟DOM 中找到了与新虚拟DOM 相同的 key

      • 若 虚拟DOM 中内容没变 直接使用之前的 真实DOM
      • 若 虚拟DOM 中内容变了,则生成新的 真实DOM ，随后替换掉页面中之前的 真实DO M

    2. 旧虚拟DOM 中未找到与新虚拟DOM 相同的 key 创建新的 真实DOM ，随后渲染到到页面

  2. 用index作为key可能会引发的问题

    • 若对数据进行逆序添加、逆序删除等破坏顺序操作,会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低
    • 若结构中还包含输入类的DOM :会产生错误DOM 更新 ==> 界面有问题

  3. 开发中如何选择 key?

    • 最好使用每条数据的唯一标识key，比如 id、手机号、身份证号、学号等唯一值
    • 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表,使用index 作为 key 是没有问题的

七、组件的理解

定义：局部功能代码和资源的集合

八、组件传参

  1. props和emit:父组件向子组件传递数据，通过prop传递。子组件传递数据给父组件是通过emit:
  2. $ref获取实例
  3. Vuex

九、vue的修饰符有哪些

  • prevent:阻止默认事件（常用);
  • stop:阻止事件冒泡（常用);
  • once:事件只触发一次（常用）;
  • capture:使用事件的捕获模式;
  • self:只有event.target是当前操作的元素是才触发事件;
  • passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

十、vue-router有几种钩子函数？执行流程如何？

  • 全局守卫
  • 路由守卫
  • 组件守卫

十一、vuerouter的两种模式的区别

  • vue-router中有三种模式，分别是hash、history、abstract
  • abstract在不支持浏览器的API换景使用
  • hash模式兼容性好，但是不美观，不利于SEO
  • history美观，historyAPI+popState，但是刷新会出现404

十二、Vue的性能优化有哪些？

  1. 数据层级不要过深，合理的设置响应式数据
  1. 使用数据时，缓存值的结果，不频繁取值
  1. 合理设置key
  1. v-show(频繁切换性能高)和v-if的合理使用
  2. 控制组件的粒度 -> Vue采用组件级别更新
  3. 采用函数式组件 -> 函数式组价开销低
  4. 采用异步组件 -> 借助webpack的分包策略
  5. 使用keep-alive来缓存组件
  6. 虚拟滚动、时间分片等策略
  7. 打包优化

十三、v-if,v-show的区别

  1. 展示形式不同
  • v-if是 创建一个dom节点
  • v-show 是display:none 、 block ，隐藏
  1. 使用场景不同
  • 初次加载v-if要比v-show好，页面不会做加载盒子
  • 频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

参考文章：三十七个常见Vue面试题，背就完事了

avatar
文章
阅读
粉丝