VUE面试题汇总（一）(1)

最新推荐文章于 2024-11-13 22:51:53 发布

2401_84093860

最新推荐文章于 2024-11-13 22:51:53 发布

阅读量1k

点赞数 17

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/2401_84093860/article/details/138876084

版权

程序员专栏收录该内容

265 篇文章

订阅专栏

使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

2）用户体验优化

骨架屏
PWA（渐进式WEB应用）
还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

3）SEO优化

预渲染
服务端渲染SSR

4）打包优化

压缩代码；
Tree Shaking/Scope Hoisting；
使用cdn加载第三方模块；
多线程打包happypack；
splitChunks抽离公共文件；
sourceMap优化；

说明：优化是个大工程，会涉及很多方面

2. Vue 的实例生命周期

参考答案：

在这里插入图片描述

（1） beforeCreate 初始化实例后数据观测和事件配置之前调用

（2） created 实例创建完成后调用

（3） beforeMount 挂载开始前被用

（4） mounted el 被新建 vm. $el 替换并挂在到实例上之后调用

（5） beforeUpdate 数据更新时调用

（6） updated 数据更改导致的 DOM 重新渲染后调用

（7） beforeDestory 实例被销毁前调用

（8） destroyed 实例销毁后调用

Vue2 与Vue3的生命周期对比

| 变量 | 实例化(次数) |

| — | — |

| beforeCreate(组件创建之前) | setup(组件创建之前) |

| created(组件创建完成) | setup(组件创建完成) |

| beforeMount(组件挂载之前) | onBeforeMount(组件挂载之前) |

| mounted(组件挂载完成) | onMounted(组件挂载完成) |

| beforeUpdate(数据更新，虚拟DOM打补丁之前) | onBeforeUpdate(数据更新，虚拟DOM打补丁之前) |

| updated(数据更新，虚拟DOM渲染完成) | onUpdated(数据更新，虚拟DOM渲染完成) |

| beforeDestroy(组件销毁之前) | onBeforeUnmount(组件销毁之前) |

| destroyed(组件销毁之后) | onUnmounted(组件销毁之后) |

3. Vue 的双向数据绑定的原理

参考答案：

VUE 实现双向数据绑定的原理就是利用了 Object. defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

Vue3. 0 将用原生 Proxy 替换 Object. defineProperty

4. 为什么要替换 Object. defineProperty？（Proxy 相比于 defineProperty 的优势）

参考答案：

在 Vue 中，Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x里，是通过递归 + 遍历 data 对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。

而要取代它的Proxy有以下两个优点;

可以劫持整个对象，并返回一个新对象
有13种劫持操作

既然Proxy能解决以上两个问题，而且Proxy作为es6的新属性在vue2. x之前就有了，为什么vue2. x不使用Proxy呢？一个很重要的原因就是：

Proxy是es6提供的新特性，兼容性不好，最主要的是这个属性无法用polyfill来兼容

5. 什么是 Proxy？

参考答案：

含义：

Proxy 是 ES6 中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。 Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）。从而可以让对象只需关注于核心逻辑，达到关注点分离，降低对象复杂度等目的。

基本用法：

let p = new Proxy(target, handler);

参数：

target 是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler 是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。
p 是代理后的对象。当外界每次对 p 进行操作时，就会执行 handler 对象上的一些方法。Proxy共有13种劫持操作，handler代理的一些常用的方法有如下几个：

get：读取

set：修改

has：判断对象是否有该属性

construct：构造函数

示例：

下面就用Proxy来定义一个对象的get和set，作为一个基础demo

let obj = {};

let handler = {

get(target, property) {

console.log( ${property} 被读取 );

return property in target ? target[property] : 3;

set(target, property, value) {

console.log( ${property} 被设置为 ${value} );

target[property] = value;

}

let p = new Proxy(obj, handler);

p.name = ‘tom’ //name 被设置为 tom

p.age; //age 被读取 3

p 读取属性的值时，实际上执行的是 handler. get() ：在控制台输出信息，并且读取被代理对象 obj 的属性。

p 设置属性值时，实际上执行的是 handler. set() ：在控制台输出信息，并且设置被代理对象 obj 的属性的值。

以上介绍了Proxy基本用法，实际上这个属性还有许多内容，具体可参考Proxy文档

三. 基于Proxy来实现双向绑定

6. 为什么避免 v-if 和 v-for 用在一起

参考答案：

vue2.x 中v-for优先级高于v-if，vue3.x 相反。所以2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用，造成性能浪费；3.x 版本中 v-if 总是优先于 v-for 生效，导致v-if访问不了v-for中的变量。

解析：

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，所以这个模板：

v-for=“user in users”

v-if=“user.isActive”

:key=“user.id”

将会经过如下运算：

this.users.map(function (user) {

if (user.isActive) {

return user.name

}

})

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。

通过将其更换为在如下的一个计算属性上遍历：