vue 常考面试真题讲解(接上篇vue核心原理)

412 阅读3分钟

vue组件如何通讯

image-20220613185600746.png 此处为常用,更全更具体的,见我csnd博客

组件渲染和更新的过程

image-20220613191942361.png

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

image-20220613192435056.png

对mvvm的理解

之前《vue核心原理》里讲过,

image-20220613192718603.png 要能对应到代码里去

Computed 有何特点

缓存,data不变则不会重新计算

提高性能

为何组件data必须是一个函数

看似是一个vue问题,实则是个js问题。为什么呢

image-20220613193128225.png Export default暴露出的是对象,但vue文件编译出来之后,实际是一个class类,当在某个地方使用这个组件的时候,实际是相当于对class的实例化。

实例化时执行这个data,如果不是一个函数的话,那每个组件的实例,数据都一样,都共享了。

所以总结:

1、.vue文件编译出来,实际是一个class类

2、在其他地方使用这个组件的时候,实际是相当于对class的实例化

3、函数有独立作用域,防止每个实例的数据一样

ajax请求应该放在哪个生命周期

  • mounted里,之前讲过。还有个图。
  • js是单线程的,ajax异步获取数据
  • 放在mounted之前,只会让逻辑更混乱

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

答案:$props

用法:

image-20220613194558469.png 细节知识点,优先级不高

如何自己实现v-model

image-20220613194937612.png Props、model、type、value、@input="$emit('对应model的event值',事件的值)"

多个组件有相同的逻辑,如何抽离

Vue2使用:mixin

但会有一点缺点。

vue3组合式API+响应式数据解决了这个问题

何时要使用异步组件

图表类大组件加载

路由异步加载

何时使用keep-alive

image-20220613200013487.png

何时需要使用beforeDestory

  • 解绑自定义事件event.$off
  • 清除定时器
  • 解绑自定义的dom事件,如window scroll等

用vue的事件,vue会自动解除,所以只有自定义的需要手动解除,这三者不清除的话,就容易造成内存泄漏。

什么是作用域插槽

image-20220614105637930.png

image-20220614105720657.png

vuex中action和mutation有何区别

  • action中处理异步,mutation不可以
  • mutation做原子操作,一次只干一件事
  • action可以整合多个mutation

Vue-router常用的路由模式

  • hash默认
  • H5 history(需要服务器支持)
  • 两者比较

其实还有第三种,地址不变、前进后题不可用。

追问:服务器如何支持?

如何配置vue-router异步加载

通过import导入组件

image-20220614110706279.png

请用vnode描述一个dom结构

image-20220614111013120.png

监听data变化的核心Api是什么

image-20220614111044713.png

vue如何监听数组变化

  • 首先object.defineProperty就不能监听数组变化
  • 需要重新定义原型,重写push pop等方法,实现监听(vue核心原理里写过)
  • proxy可以原生支持监听数组变化

请描述响应式原理

  • 监听data变化
  • 组件渲染和更新的过程

image-20220613191942361.png

diff算法的时间复杂度

vue2在上篇文章里有详细讲解,这里只做核心差异提炼

  • O(n)
  • 在O(n^3)上做了调整

Tag key不相同 直接删除 ;相同,则比较。

react是仅右移的比较;vue2是双端比较,四个指针向中间靠拢;vue3是最长递增子序列。