2024年Web前端最新2024最新Vue面试必胜宝典，大厂面试题解析_vue前端大厂面试，2024年最新web前端hr面试

2401_84434086

于 2024-05-11 16:55:29 发布

阅读量879

点赞数 11

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84434086/article/details/138722282

版权

179 篇文章 0 订阅

订阅专栏

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

Vue2.x 设计理念

通过建立虚拟 dom 树, document.createDocumentFragment()，方法创建虚拟 dom 树。一旦被监测的数据改变，会通过 Object.defineProperty 定义的数据拦截，截取到数据的变化。

变虚拟 dom 的中的具体数据。

a) key 的作用主要是为了高效的更新虚拟 DOM。另外 vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们。否则 vue 只会替换其内部属性而不会触发过渡效果
b) key 不能用 index 代替，index 在同一个页面会有重复的情况，违背了高效渲染的初衷。

a) 在 new Vue() ， data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。
b) 当 data 选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的 data 不会相互影响，是独立的。

a) $router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
b) $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个 route对象，是一个局部对象，包含 path，params，hash，query，fullPath，matched， name 等路由信息参数。

a) defineProperty 的局限性的最大原因是它只能针对单例属性做监听，Vue2.x 中对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
b) 在Vue 中使用下标的方式直接修改属性的值或者添加一个预先不存在的对象属性是无法做到 setter 监听的，这是 defineProperty 的局限性。
c) Proxy 的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
d) Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

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

a)
生成
block tree

Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的，单个组件内部需要遍历该组件的整个 vnode 树。
Vue.js 3.0 做到了通过编译阶段对静态模板的分析，编译生成了 Block tree。Block tree 是一个将模版基于动态节点指令切割的嵌套区块，每个区块内部的节点结构是固定的。每个区块只需要追踪自身包含的动态节点。

3.1 传统 Virtual DOM 的性能瓶颈