面试常问的vue面试题集锦（一）

女爷i 2023-02-26 05:29 19阅读 0赞

**面试题一、请你简述vue的生命周期钩子函数**  
beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。  
created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有 e l 。 b e f o r e M o u n t 在 挂 载 开 始 之 前 被 调 用 ： 相 关 的 r e n d e r 函 数 首 次 被 调 用 。 m o u n t e d e l 被 新 创 建 的 v m . el。 beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted el 被新创建的 vm. el。beforeMount在挂载开始之前被调用：相关的render函数首次被调用。mountedel被新创建的vm.el 替换，并挂载到实例上去之后调用该钩子。  
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。  
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。  
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。  
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。  
钩子函数中该干的事情：  
created 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。  
mounted 实例已经挂载完成，可以进行一些DOM操作。  
beforeUpdate 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。  
updated 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。  
destroyed 可以执行一些优化操作,清空定时器，解除绑定事件。  
**面试题二、vue组件间通信常用方式**  
首先明确一点，组件化的好处：方便维护，易于扩展、减少DOM操作。  
1、使用props传递参数（属性在组件标签上需要使用短横线命名法，在组件中声明需要采用驼峰命名法；通过带有校验，通过type指明外界传递过来的数据是什么类型，其中，对象和数组类型如果给出默认值时需要返回一个工厂函数）  
2、子组件中使用 e m i t 触 发 父 组 件 中 的 方 法 ， 通 过 回 调 的 方 式 讲 修 改 的 内 容 传 递 给 父 组 件 3 、 . s y n c 的 形 式 ， 触 发 的 事 件 名 u p d a t e : ( 绑 定 . s y n c 属 性 的 名 字 ) − − 属 于 固 定 写 法 < S o n 1 : m n y . s y n c = " m n y " > < / S o n 1 > < b u t t o n @ c l i c k = " emit触发父组件中的方法，通过回调的方式讲修改的内容传递给父组件 3、.sync的形式，触发的事件名 update:(绑定.sync属性的名字) --属于固定写法 <Son1 :mny.sync="mny"></Son1> <button @click=" emit触发父组件中的方法，通过回调的方式讲修改的内容传递给父组件3、.sync的形式，触发的事件名update:(绑定.sync属性的名字)−−属于固定写法<Son1:mny.sync="mny"></Son1><button@click="emit(‘update:mny’,200)">更改  
4、v-model，子组件触发的事件名称只能是input，接受到的属性名只能叫value  
5、使用 p a r e n t 、 parent、 parent、children，可以获取到父组件或者子组件中的属性和方法。如果层级很深，就会出现 p a r e n t . parent. parent.parent，可以封装一个 d i s p a t c h 方 法 向 上 进 行 派 发 ， 或 者 封 装 一 个 dispatch方法向上进行派发，或者封装一个 dispatch方法向上进行派发，或者封装一个broadcast向下派发  
6、 a t t r s 、 attrs、 attrs、listeners 使用 a t t r s 属 性 ， 可 以 将 属 性 继 续 向 下 传 递 ； 使 用 attrs属性，可以将属性继续向下传递；使用 attrs属性，可以将属性继续向下传递；使用listeners将方法继续向下传递  
7、Provide和Inject，向任意子组件中可以注入父级数据，使用inject接收到值以后，会将数据挂载在当前实例上  
8、使用ref 可以获取组件的实例，实例上的属性和方法随机可以获取到  
9、使用eventBus进行跨组件通信  
**面试题三、简单聊一下Promise**  
1、可以解决并发问题（可以同步多个异步方法的执行结果）  
2、可以解决多个回调嵌套的问题  
3、Promise是一个类；  
4、每次可以通过new的形式实例化一个实例时都需要传递一个执行器（执行器是立即执行的），执行器函数中有两个参数（resolve、reject，这两个都是方法）；  
5、默认Promise有三个状态，pendding（请求中），如果调用了resolve方法，表示将请求中的状态转到成功态（fulfilled），如果调用了reject方法，表示将请求中的状态转到失败态（rejected）；  
6、只有状态是pendding态时，才能更改状态；并且，状态一旦改变，不能更改；  
7、每一个promise实例都有一个then方法，then方法里面包含成功的回调和失败的回调  
Promise.all 处理多个异步的并发问题（全部完成才算完成，如果有一个失败，就失败）  
Promise.race 有一个成功就成功，有一个失败就失败  
**面试题四、说一下vue中的slot插槽**  
使用customer组件时，如果没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。  
直接使用slot元素时也称为默认插槽，如果组件中需要放置多个位置，可以给slot添加name属性，用来定义额外的插槽。  
指的一提的是：Vue2.6.0起引入了v-slot，取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute。  
子节点数据会存在组件实例中的 s l o t s . d e f a u l t ∗ ∗ 面 试 题 五 、 v u e 中 的 r e n d e r 函 数 ∗ ∗ V u e 选 项 中 的 r e n d e r 函 数 若 存 在 ， 则 V u e 构 造 函 数 不 会 从 t e m p l a t e 选 项 或 通 过 e l 选 项 指 定 的 挂 载 元 素 中 提 取 出 的 h t m l 模 板 编 译 渲 染 函 数 。 该 渲 染 函 数 接 受 一 个 c r e a t e E l e m e n t 方 法 作 为 第 一 个 参 数 用 来 创 建 V N o d e 。 虚 拟 D O M ： 不 是 一 个 实 际 的 D O M 元 素 。 它 更 准 确 的 名 字 可 能 是 c r e a t e N o d e D e s c r i p t i o n ， 因 为 它 所 包 含 的 信 息 会 告 诉 V u e 页 面 上 需 要 渲 染 什 么 样 的 节 点 ， 包 括 及 其 子 节 点 的 描 述 信 息 。 c r e a t e E l e m e n t 参 数 ： 一 个 标 签 名 称 （ 必 填 项 ） ， 一 个 与 模 板 中 属 性 对 应 的 数 据 对 象 （ 可 选 ） ， 子 级 虚 拟 节 点 ， 由 c r e a t e E l e m e n t 构 建 而 成 。 也 可 以 使 用 字 符 串 来 生 成 ” 文 本 虚 拟 节 点 “ （ 可 选 ） ∗ ∗ 面 试 题 六 、 简 述 一 下 v u e x ∗ ∗ v u e x 是 专 为 v u e . j s 应 用 程 序 开 发 的 状 态 管 理 模 式 。 每 一 个 V u e x 应 用 的 核 心 就 是 s t o r e （ 仓 库 ） 。 “ s t o r e ” 基 本 上 就 是 一 个 容 器 ， 它 包 含 着 你 的 应 用 中 大 部 分 的 状 态 ( s t a t e ) 。 1 、 V u e x 的 状 态 存 储 是 响 应 式 的 。 当 V u e 组 件 从 s t o r e 中 读 取 状 态 的 时 候 ， 若 s t o r e 中 的 状 态 发 生 变 化 ， 那 么 相 应 的 组 件 也 会 相 应 地 得 到 高 效 更 新 。 2 、 你 不 能 直 接 改 变 s t o r e 中 的 状 态 。 改 变 s t o r e 中 的 状 态 的 唯 一 途 径 就 是 显 式 地 提 交 ( c o m m i t ) m u t a t i o n 。 3 、 A c t i o n 提 交 的 是 m u t a t i o n ， 而 不 是 直 接 变 更 状 态 ， A c t i o n 可 以 包 含 任 意 异 步 操 作 4 、 g e t t e r 就 像 计 算 属 性 一 样 ， g e t t e r 的 返 回 值 会 根 据 它 的 依 赖 被 缓 存 起 来 ， 且 只 有 它 的 依 赖 值 发 生 了 变 化 才 会 被 重 新 计 算 ∗ ∗ 面 试 题 七 、 v u e − r o u t e r 有 关 ∗ ∗ V u e − r o u t e r 是 v u e 官 方 的 路 由 管 理 器 。 提 供 了 诸 如 ： h a s h 和 h i s t o r y 两 种 路 由 模 式 。 使 用 该 插 件 时 ， 必 须 提 供 一 个 i n s t a l l 方 法 ， 并 且 以 V u e 作 为 参 数 。 提 供 了 两 个 全 局 组 件 r o u t e r − l i n k 、 r o u t e r − v i e w 。 每 个 组 件 中 都 有 slots.default \*\*面试题五、vue中的render函数\*\* Vue选项中的render函数若存在，则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的html模板编译渲染函数。该渲染函数接受一个createElement方法作为第一个参数用来创建 VNode。 虚拟DOM：不是一个实际的DOM元素。它更准确的名字可能是createNodeDescription，因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括及其子节点的描述信息。 createElement参数：一个标签名称（必填项），一个与模板中属性对应的数据对象（可选），子级虚拟节点，由createElement构建而成。也可以使用字符串来生成”文本虚拟节点“（可选） \*\*面试题六、简述一下vuex\*\* vuex是专为vue.js应用程序开发的状态管理模式。 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。 3、Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作 4、getter就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有它的依赖值发生了变化才会被重新计算 \*\*面试题七、vue-router有关\*\* Vue-router是vue官方的路由管理器。 提供了诸如： hash和history两种路由模式。 使用该插件时，必须提供一个install方法，并且以Vue作为参数。 提供了两个全局组件router-link、router-view。 每个组件中都有 slots.default∗∗面试题五、vue中的render函数∗∗Vue选项中的render函数若存在，则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的html模板编译渲染函数。该渲染函数接受一个createElement方法作为第一个参数用来创建VNode。虚拟DOM：不是一个实际的DOM元素。它更准确的名字可能是createNodeDescription，因为它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括及其子节点的描述信息。createElement参数：一个标签名称（必填项），一个与模板中属性对应的数据对象（可选），子级虚拟节点，由createElement构建而成。也可以使用字符串来生成”文本虚拟节点“（可选）∗∗面试题六、简述一下vuex∗∗vuex是专为vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。1、Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。3、Action提交的是mutation，而不是直接变更状态，Action可以包含任意异步操作4、getter就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有它的依赖值发生了变化才会被重新计算∗∗面试题七、vue−router有关∗∗Vue−router是vue官方的路由管理器。提供了诸如：hash和history两种路由模式。使用该插件时，必须提供一个install方法，并且以Vue作为参数。提供了两个全局组件router−link、router−view。每个组件中都有router和route 这两个属性，前者里面有很多api，后面里面有很多属性  
如何实现一个vue-router。后面有代码示例，可以研读。  
**面试题八、vue中数组是如何监听变化的**  
vue源码中重写了关于操作数组的七个方法（push、pop、unshift、shift、reverse、sort、splice）  
关键代码：  
let oldProtoMehtods = Array.prototype;  
let proto = Object.create(oldProtoMehtods);  
\[‘push’, ‘pop’, ‘shift’, ‘unshift’,‘reverse’,‘sort’,‘splice’ \].forEach(method => \{  
proto\[method\] = (…args) => \{  
oldProtoMehtods\[method\].call(this, …args)  
\}  
\})  
另外，push，unshift，splice这三种添加的操作，还遍历了数组里面每一个元素，如果是对象时，则再次Object.defineProperty添加getter和setter一次。  
**面试题九、什么是库？什么是框架？什么是声明式？什么是命令式？**  
1、库是将代码合成一个产品，库是我们调用库里的方法实现自己的功能  
2、框架则是为解决一类问题而开发的产品，框架是我们在指定的位置编写好代码，框架帮我们调用  
框架和库的最本质的区别在于控制权：you call libs, frameworks call you  
3、声明式就是利用数组的方法forEach（我们想要的是循环，内部帮我们去做）  
4、自己写for循环就是命令式（命令其按照自己的方式得到结果）  
**面试题十、watch和computed的区别**  
watch和computed 内部调用的都是new Watcher  
watch:  
let vm = new Vue(\{  
el: ‘\#app’,  
data: \{ name: ‘heima’ \}  
\});  
function initWatch(key,handler)\{  
vm.$watch(key,handler);  
\}  
initWatch(‘name’,function(newValue)\{  
console.log(newValue)  
\});  
vm.name = ‘care’; // 数据变化会执行对应的handler  
Computed:  
let dirty = true; // 内部有脏值检测系统  
function initComputed(key,handler) \{  
Object.defineProperty(vm, key, \{  
get() \{  
if (dirty) \{ // 取值后会将dirty 变成false  
value = handler();  
dirty = false;  
\}  
return value  
\}  
\})  
\}  
initComputed(‘age’, function () \{  
console.log(‘取值一次’)  
return vm.name  
\});  
console.log(vm.age);  
console.log(vm.age);  
vm.name = ‘hello’; // 当依赖的值变化 会将dirty重新改成true,保证获取最新值  
dirty = true;  
console.log(vm.age);