阅读 442

一起来看看这份集齐vue2.0/vue3.0面试通杀秘籍(2021版) PDF,面试官问的源码问题绝对稳了!

Vue3.0 对于我们前端人的重要性 —— 2021年面试必备

2020年09月18日,vue3.0正式发布。随着它的发布,Vue.js再次被推上了前端的风口浪尖。

同时,面试官的提问也将加入一些有关Vue3.0的新元素(相信近期去面试的小伙伴或多或少都会被问到Vue3.0的知识点)。

今天就分析总结了一些Vue的面试题(本文讲的非常详细,争取大家都能看懂,对大家有所帮助)

整理面试题


一、Vue.js 3.0 响应式系统的实现原理?

1.reactive

设置对象为响应式对象。接收一个参数,判断这参数是否是对象。不是对象则直接返回这个参数,不做响应式处理。

创建拦截器handerler,设置get/set/deleteproperty。

get

收集依赖(track);

如果当前 key 的值是对象,则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty;

如果当前的 key 的值不是对象,则返回当前 key 的值。

set

设置的新值和老值不相等时,更新为新值,并触发更新(trigger)。

deleteProperty

当前对象有这个 key 的时候,删除这个 key 并触发更新(trigger)。

2.effect

接收一个函数作为参数。作用是:访问响应式对象属性时去收集依赖

3.track

接收两个参数:target 和 key

  • 如果没有 activeEffect,则说明没有创建 effect 依赖

  • 如果有 activeEffect,则去判断 WeakMap 集合中是否有 target 属性

  • WeakMap 集合中没有 target 属性,则 set(target, (depsMap = new Map()))

  • WeakMap 集合中有 target 属性,则判断 target 属性的 map 值的 depsMap 中是否有 key 属性

  • depsMap 中没有 key 属性,则 set(key, (dep = new Set()))

  • depsMap 中有 key 属性,则添加这个 activeEffect

4.trigger

判断 WeakMap 中是否有 target 属性,WeakMap 中有 target 属性,则判断 target 属性的 map 值中是否有 key 属性,有的话循环触发收集的 effect()。

二、响应式是惰性的

  • 在 Vue.js 2.x 中,对于一个深层属性嵌套的对象,要劫持它内部深层次的变化,就需要递归遍历这个对象,执行 Object.defineProperty 把每一层对象数据都变成响应式的,这无疑会有很大的性能消耗。
  • 在 Vue.js 3.0 中,使用 Proxy API 并不能监听到对象内部深层次的属性变化,因此它的处理方式是在 getter 中去递归响应式,这样的好处是真正访问到的内部属性才会变成响应式,简单的可以说是按需实现响应式,减少性能消耗。

基础用法:

let datas={
num:0
}
let proxy=new Proxy(datas,{
  get(target,property){
    return target[property]+=value
  },
  set(target,property,value){
    target[property]+=value
  }
})
复制代码

三、vue3新增Composition API

vue3 新增的一组 api,它是基于函数的 api,可以更灵活的组织组件的逻辑。 解决options api在大型项目中,options api不好拆分和重用的问题。

setup介绍

setup 是 Vue3.0新增的一个选项, 他是组件内使用 Composition API的入口。

setup 执行时机

setup 执行时机是在 beforeCreate 之前执行。

setup 参数说明

使用setup时,它接受两个参数:

  1. props: 组件传入的属性
  2. context

setup 中接受的props是响应式的, 当传入新的 props 时,会及时被更新。由于是响应式的, 所以不可以使用 ES6 解构,解构会消除它的响应式。错误代码示例, 这段代码会让 props 不再支持响应式:

// demo.vue
export default defineComponent ({
    setup(props, context) {
        const { name } = props
        console.log(name)
    },
})
复制代码

四、 Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别?

  • Options Api

包含一个描述组件选项(data、methods、props等)的对象options;

API开发复杂组件,同一个功能逻辑的代码被拆分到不同选项 ;

使用mixin重用公用代码,也有问题:命名冲突,数据来源不清晰;

  • composition Api

vue3 新增的一组 api,它是基于函数的 api,可以更灵活的组织组件的逻辑。

解决options api在大型项目中,options api不好拆分和重用的问题。

五、vue3新增内置组件 Teleport(哆啦 A 梦中的任意门)

Teleport就是一种将代码组织逻辑依旧放在组件中,这样我们能够使用组件内部的数据状态,控制组件展示的形式,但是最后渲染的地方可以是任意的,而不是局限于组件内部

Teleport 的使用:

<template>
  <teleport to="body" class="modal" v-if="show">
    <div class="modal-mask" @click="close"></div>
    <slot></slot>
  </teleport>
</template>

<script>
import "./style.scss";
export default {
  props: {
    show: Boolean,
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>
复制代码

六、Props初始化和更新流程改进

七、Vue3 slot是什么?并说一下详细的用法?

八、Vue 3.0 在编译方面有哪些优化?

九、Vue3 依赖注入子孙组件如何共享数据

十、Vue3 侦听器实现原理与使用场景

十一、Vue3 组件实现原理核心源码解读

十二、Vuex 数据流管理方案

十三、原生服务端渲染(SSR)的实现、同构开发

十四、Nuxt.js 集成式SSR框架

在这里插入图片描述

🎁在面试的时候肯定免不了被问到其他知识点例如HTML/CSS,JavaScript,浏览器,小程序,Webpack我也总结出来了,详情请移步

Vue3.0实战

一、说说Vue2.0和Vue3.0有什么区别

1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:

  • 可直接监听数组类型的数据变化
  • 监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升
  • 可拦截apply、ownKeys、has等13种方法,而Object.defineProperty不行
  • 直接实现对象属性的新增/删除

2.新增Composition API,更好的逻辑复用和代码组织

3.重构 Virtual DOM

  • 模板编译时的优化,将一些静态节点编译成常量
  • slot优化,将slot编译为lazy函数,将slot的渲染的决定权交给子组件
  • 模板中内联事件的提取并重用(原本每次渲染都重新生成内联函数)

4.代码结构调整,更便于Tree shaking,使得体积更小

5.使用Typescript替换Flow

二、Vue3的新特性有哪些

1、响应系统的变动 由原来的Object.defineProperty 的getter 和 setter,改变成为了ES2015 Proxy 作为其观察机制。

Proxy的优势:消除了以前存在的警告,使速度加倍,并节省了一半的内存开销。

2、虚拟DOM重写(Virtual DOM Rewrite)

虚拟 DOM 从头开始重写,我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。

3、组件渲染的优化(优化插槽生成)

Vue2当中在父组件渲染同时,子组件也会渲染。 Vue3就可以单独渲染父组件、子组件。

4、静态树提升(Static Tree Hoisting)

使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态组件,然后将其提升,从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。

5、静态属性提升(Static Props Hoisting)

此外,我们可以期待静态属性提升,其中 Vue 3 将跳过不会改变节点的打补丁过程。

总体来说:

  • ts支持
  • 源码更易读
  • 更小
  • 更容易维护
  • 更加友好
  • 更易用

三、基于vite/webpack实现Vue3工程化部署

四、掌握setup和10种响应式系统API

五、掌握新生命周期函数

六、模板refs的使用

七、Vue3中的响应式系统和dom-diff

在这里插入图片描述

vue核心知识点


常规篇

1.vuex的action有返回值吗?返回的是什么?

  • store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise
  • Action 通常是异步的,要知道 action 什么时候结束或者组合多个 action以处理更加复杂的异步流程,可以通过定义action时返回一个promise对象,就可以在派发action的时候就可以通过处理返回的 Promise处理异步流程

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。

2.为什么不直接分发mutation,而要通过分发action之后提交 mutation变更状态

  • mutation 必须同步执行,我们可以在 action 内部执行异步操作
  • 可以进行一系列的异步操作,并且通过提交 mutation 来记录 action 产生的副作用(即状态变更)

3.为什么 v-for 和 v-if 不建议用在一起

  • 当 v-for 和 v-if 处于同一个节点时,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大,而真正要展示的数据很少时,这将造成很大的性能浪费
  • 这种场景建议使用 computed,先对数据进行过滤

4.组件中的data为什么是一个函数?

  • 一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。
  • 如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

5.子组件为什么不可以修改父组件传递的Prop?怎么理解vue的单向数据流?

  • Vue提倡单向数据流,即父级props的更新会流向子组件,但是反过来则不行。
  • 这是为了防止意外的改变父组件状态,使得应用的数据流变得难以理解。
  • 如果破坏了单向数据流,当应用复杂时,debug 的成本会非常高。

6.v-model是如何实现双向绑定的?

  • v-model是用来在表单控件或者组件上创建双向绑定的
  • 他的本质是v-bind和v-on的语法糖
  • 在一个组件上使用v-model,默认会为组件绑定名为value的prop和名为input的事件

7.computed 和 watch 的区别和运用的场景?

8.Vue2.x组件通信有哪些方式?

9.为什么不建议用index作为key?

10.说一下虚拟Dom以及key属性的作用

11.为什么不建议用index作为key?

在这里插入图片描述

生命周期篇

1.说一下你对Vue的生命周期的理解

2.Vue中组件生命周期调用顺序是什么样的?

3.在什么阶段才能访问操作DOM?

4.你的接口请求一般放在哪个生命周期中?

在这里插入图片描述

路由篇

1.vue路由hash模式和history模式实现原理分别是什么,他们的区别是什么?

2.路由懒加载是什么意思?如何实现路由懒加载?

3.在 Vue 实例中编写生命周期 hook 或其他 option/properties 时,为什么不使用箭头函数?

4.说说你对keep-alive组件的了解

5.说说你对SSR的了解

6.你都做过哪些Vue的性能优化?

在这里插入图片描述

最后

说实话,作为一名前端工程师,不论你需不需要面试都应该好好看下这份资料。我大概撸了一遍,真的是堪称典范,拿到手总是不亏的~ 以上《Vue面试知识点和Vue3.0面试题总结》我已经全部为大家打包准备好了,希望对正在学习的你有所帮助!

完整文档获取方式: 只需你点赞👍 +收藏 ⭐+关注后,点这里免费下载通道,跳转不了的童鞋在评论下方回复“面试,冲”即可获取。

更多:

  • 前端基础(HTML/CSS)
  • JavaScript面试题
  • ES6
  • Node.js
  • React面试题
  • 算法面试题
  • 浏览器渲染
  • 计算机网络
  • Webpack
  • 设计模式
  • 微信小程序实战
文章分类
前端
文章标签