2022年前端面试题参考.pdf

《2022年前端面试题参考.pdf》由会员分享，可在线阅读，更多相关《2022年前端面试题参考.pdf（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、2022年 最 新 前 端 面 试 题 js面 试 题 1、js数 据 类 型 基 本 数 据 类 型 Number、String、Boolean、Nulk Undefined、Symbok biglnt 引 用 数 据 类 型 objects Array、Date、Function、RegExp2、js变 量 和 函 数 声 明 的 提 升 在 js中 变 量 和 函 数 的 声 明 会 提 升 到 最 顶 部 执 行 函 数 的 提 升 高 于 变 量 的 提 升 函 数 内 部 如 果 用 va r声 明 了 相 同 名 称 的 外 部 变 量，函 数 将 不 再 向 上 寻 找。匿 名

2、 函 数 不 会 提 升。3、闭 包 闭 包 就 是 能 够 读 取 其 他 函 数 内 部 变 量 的 函 数 闭 包 基 本 上 就 是 一 个 函 数 内 部 返 回 一 个 函 数 好 处 可 以 读 取 函 数 内 部 的 变 量 将 变 量 始 终 保 持 在 内 存 中 可 以 封 装 对 象 的 私 有 属 性 和 私 有 方 法 坏 处 比 较 耗 费 内 存、使 用 不 当 会 造 成 内 存 溢 出 的 问 题 4、=和=的 区 另 I J=是 非 严 格 意 义 上 的 相 等 值 相 等 就 相 等=是 严 格 意 义 上 的 相 等，会 比 较 两 边 的 数 据

3、类 型 和 值 大 小 值 和 引 用 地 址 都 相 等 才 相 等 5、this this总 是 指 向 函 数 的 直 接 调 用 者 如 果 有 new关 键 字，this指 向 new出 来 的 对 象 在 事 件 中，this指 向 触 发 这 个 事 件 的 对 象 6、js数 组 和 对 象 的 遍 历 方 式 for in for forEach for-of7、map与 forEach的 区 另 I forEach方 法，是 最 基 本 的 方 法，就 是 遍 历 与 循 环，默 认 有 3 个 传 参：分 别 是 遍 历 的 数 组 内 容 item、数 组 索 引 in

4、dex、和 当 前 遍 历 数 组 Array map方 法，基 本 用 法 与 forEach 一 致，但 是 不 同 的，它 会 返 回 一 个 新 的 数 组，所 以 callback需 要 有 return值，如 果 没 有，会 返 回 undefined8、箭 头 函 数 与 普 通 函 数 的 区 别？函 数 体 内 的 th is对 象，就 是 定 义 时 所 在 的 对 象，而 不 是 使 用 时 所 在 的 对 象 不 可 以 当 作 构 造 函 数，也 就 是 说，不 可 以 使 用 new命 令，否 则 会 抛 出 一 个 错 误 不 可 以 使 用 arguments对

5、 象，该 对 象 在 函 数 体 内 不 存 在。如 果 要 用，可 以 用 Rest参 数 代 替 不 可 以 使 用 yield命 令，因 此 箭 头 函 数 不 能 用 作 Generator函 数 9、同 源 策 略 同 源 指 的 是 域 名、协 议、端 口 号 相 同 10、如 何 解 决 跨 域 jsonp跨 域 documentdomain+iframe 跨 域 nodQjs中 间 件 代 理 跨 域 后 端 在 头 部 信 息 里 面 设 置 安 全 域 名 11、严 格 模 式 的 限 制 变 量 必 须 声 明 后 再 使 用 函 数 的 参 数 不 能 有 同 名 属

6、性，否 则 报 错 不 能 使 用 w ith语 句 禁 止 th is指 向 全 局 对 象 12、es6新 增 新 增 模 板 字 符 串 箭 头 函 数 for-of（用 来 遍 历 数 据 一 例 如 数 组 中 的 值。）ES6将 Promise对 象 纳 入 规 范，提 供 了 原 生 的 Promise对 象。增 加 了 le t和 const命 令，用 来 声 明 变 量。还 有 就 是 引 入 module模 块 的 概 念 13、attribute和 property的 区 别 是 什 么？attribute是 dom元 素 在 文 档 中 作 为 htm l标 签 拥 有

7、 的 属 性 property就 是 dom元 素 在 j s 中 作 为 对 象 拥 有 的 属 性。对 于 htm l的 标 准 属 性 来 说，attribute和 property是 同 步 的，是 会 自 动 更 新 的 但 是 对 于 自 定 义 的 属 性 来 说，他 们 是 不 同 步 的 14、let和 const的 区 别 是 什 么？le t命 令 不 存 在 变 量 提 升，如 果 在 le t前 使 用，会 导 致 报 错 如 果 块 区 中 存 在 le t和 const命 令，就 会 形 成 封 闭 作 用 域 不 允 许 重 复 声 明 const定 义 的 是

8、 常 量，不 能 修 改，但 是 如 果 定 义 的 是 对 象，可 以 修 改 对 象 内 部 的 数 据 15、内 存 泄 漏 定 义：程 序 中 己 动 态 分 配 的 堆 内 存 由 于 某 种 原 因 程 序 未 释 放 或 无 法 释 放 引 发 的 各 种 问 题。Js中 可 能 出 现 的 内 存 泄 漏 情 况：结 果：变 慢，崩 溃，延 迟 大 等 js中 可 能 出 现 的 内 存 泄 漏 原 因 全 局 变 量 dom清 空 时，还 存 在 引 用 定 时 器 未 清 除 子 元 素 存 在 引 起 的 内 存 泄 露 16、script弓 I入 方 式?htm l 静

9、 态 script 引 入 js动 态 插 入：异 步 加 载，元 素 解 析 完 成 后 执 行：异 步 加 载，但 执 行 时 会 阻 塞 元 素 渲 染 17、数 组(array)方 法 m ap:遍 历 数 组，返 回 回 调 返 回 值 组 成 的 新 数 组 forEach:无 法 break,可 以 用 try/catch 中 throw new Error 来 停 止 filte r:过 滤 some:有 一 项 返 回 true,则 整 体 为 true every:有 一 项 返 回 false,则 整 体 为 false join:通 过 指 定 连 接 符 生 成 字

10、符 串 p u s h/p o p:末 尾 推 入 和 弹 出，改 变 原 数 组，返 回 推 入/弹 出 项 u n s h ift/s h ift:头 部 推 入 和 弹 出，改 变 原 数 组，返 回 操 作 项 sort(fn)/reverse:排 序 与 反 转，改 变 原 数 组 concat:连 接 数 组，不 影 响 原 数 组，浅 拷 贝 slice(start,end):返 回 截 断 后 的 新 数 组，不 改 变 原 数 组 splice(start,number,value)：返 回 删 除 元 素 组 成 的 数 组，value为 插 入 项，改 变 原 数 组 i

11、ndexOf/lastlndexOffvalue,fromlndex):查 找 数 组 项，返 回 对 应 的 下 标 reduce/reduceRight(fn(prev,cur),defaultPrev):两 两 执 行，prev 为 上 次 化 简 函 数 的 return 值，cur 为 当 前 值(从 第 二 项 开 始)18、JavaScript 深 浅 拷 贝？浅 拷 贝 Objectassign 深 拷 贝 可 以 通 过 JSON.parse(JSON.stringify(object)来 解 决 19、说 说 异 步 编 程 的 实 现 方 式？回 调 函 数 优 点：简

12、单、容 易 理 解 缺 点：不 利 于 维 护、代 码 耦 合 高 事 件 监 听 优 点：容 易 理 解，可 以 绑 定 多 个 事 件，每 个 事 件 可 以 指 定 多 个 回 调 函 数 缺 点：事 件 驱 动 型，流 程 不 够 清 晰 发 布/订 阅(观 察 者 模 式)类 似 于 事 件 监 听，但 是 可 以 通 过 消 息 中 心，了 解 现 在 有 多 少 发 布 者，多 少 订 阅 者 Promise 对 象 优 点：可 以 利 用 then方 法，进 行 链 式 写 法；可 以 书 写 错 误 时 的 回 调 函 数 缺 点：编 写 和 理 解，相 对 比 较 难 Ge

13、nerator 函 数 优 点：函 数 体 内 外 的 数 据 交 换、错 误 处 理 机 制 缺 点：流 程 管 理 不 方 便 async函 数 优 点：内 置 执 行 器、更 好 的 语 义、更 广 的 适 用 性、返 回 的 是 Promise、结 构 清 晰 缺 点：错 误 处 理 机 制 20、说 说 面 向 对 象 编 程 思 想？基 本 思 想 是 使 用 对 象，类，继 承，封 装 等 基 本 概 念 来 进 行 程 序 设 计 优 点 易 维 护 易 扩 展 开 发 工 作 的 重 用 性、继 承 性 高，降 低 重 复 工 作 量。缩 短 了 开 发 周 期 21、项 目

14、 性 能 优 化 减 少 HTTP请 求 数 减 少 DNS查 询 使 用 CDN 避 免 重 定 向 图 片 懒 加 载 减 少 DOM元 素 数 量 减 少 D 0M操 作 使 用 外 部 JavaScript和 CSS 压 缩 JavaScript、CSS、字 体、图 片 等 优 化 CSS Sprite 使 用 iconfont 多 域 名 分 发 划 分 内 容 到 不 同 域 名 尽 量 减 少 iframe使 用 避 免 图 片 s rc为 空 把 样 式 表 放 在 lin k中 把 JavaScript放 在 页 面 底 部 22、什 么 是 单 线 程，和 异 步 的 关

15、系？单 线 程：只 有 一 个 线 程，只 能 做 一 件 事 原 因：避 免 D 0M渲 染 的 冲 突 浏 览 器 需 要 渲 染 D0M JS可 以 修 改 DOM结 构 JS执 行 的 时 候，浏 览 器 D 0M渲 染 会 暂 停 两 段 JS也 不 能 同 时 执 行（都 修 改 DOM就 冲 突 了）webworker支 持 多 线 程，但 是 不 能 访 问 DOM 解 决 方 案：异 步 23、说 说 负 载 均 衡？单 台 服 务 器 共 同 协 作，不 让 其 中 某 一 台 或 几 台 超 额 工 作，发 挥 服 务 器 的 最 大 作 用 h ttp重 定 向 负 载

16、 均 衡：调 度 者 根 据 策 略 选 择 服 务 器 以 3 0 2响 应 请 求，缺 点 只 有 第 一 次 有 效 果，后 续 操 作 维 持 在 该 服 务 器 dns负 载 均 衡：解 析 域 名 时，访 问 多 个 ip服 务 器 中 的 一 个（可 监 控 性 较 弱）原 因-避 免 DOM渲 染 的 冲 突 反 向 代 理 负 载 均 衡：访 问 统 一 的 服 务 器，由 服 务 器 进 行 调 度 访 问 实 际 的 某 个 服 务 器，对 统 一 的 服 务 器 要 求 大，性 能 受 到 服 务 器 群 的 数 量 24、作 用 域 链？作 用 域 链 可 以 理 解

17、 为 一 组 对 象 列 表，包 含 父 级 和 自 身 的 变 量 对 象，因 此 我 们 便 能 通 过 作 用 域 链 访 问 到 父 级 里 声 明 的 变 量 或 者 函 数 25、什 么 是 原 型、原 型 链、继 承？所 有 的 函 数 都 有 prototype属 性（原 型）所 有 的 对 象 都 有 _ proto 属 性 在 Javascript中，每 个 函 数 都 有 一 个 原 型 属 性 prototype指 向 自 身 的 原 型，而 由 这 个 函 数 创 建 的 对 象 也 有 一 个 proto属 性 指 向 这 个 原 型，而 函 数 的 原 型 是 一

18、 个 对 象，所 以 这 个 对 象 也 会 有 一 个 proto指 向 自 己 的 原 型，这 样 逐 层 深 入 直 到。均 ect对 象 的 原 型，这 样 就 形 成 了 原 型 链。26、JS垃 圾 回 收 机 制 是 怎 样 的？1.概 述 js的 垃 圾 回 收 机 制 是 为 了 防 止 内 存 泄 漏（已 经 不 需 要 的 某 一 块 内 存 还 一 直 存 在 着），垃 圾 回 收 机 制 就 是 不 停 歇 的 寻 找 这 些 不 再 使 用 的 变 量，并 且 释 放 掉 它 所 指 向 的 内 存。在 JS中，JS的 执 行 环 境 会 负 责 管 理 代 码 执

19、 行 过 程 中 使 用 的 内 存。2.变 量 的 生 命 周 期 当 一 个 变 量 的 生 命 周 期 结 束 之 后，它 所 指 向 的 内 存 就 会 被 释 放。js有 两 种 变 量，局 部 变 量 和 全 局 变 量，局 部 变 量 是 在 他 当 前 的 函 数 中 产 生 作 用，当 该 函 数 结 束 之 后，该 变 量 内 存 会 被 释 放，全 局 变 量 的 话 会 一 直 存 在，直 到 浏 览 器 关 闭 为 止。3.js垃 圾 回 收 方 式 有 两 种 方 式：标 记 清 除、引 用 计 数 标 记 清 除：大 部 分 浏 览 器 使 用 这 种 垃 圾 回

20、 收，当 变 量 进 入 执 行 环 境（声 明 变 量）的 时 候，垃 圾 回 收 器 将 该 变 量 进 行 了 标 记，当 该 变 量 离 开 环 境 的 时 候，将 其 再 度 标 记，随 之 进 行 删 除。引 用 计 数：这 种 方 式 常 常 会 引 起 内 存 的 泄 露，主 要 存 在 于 低 版 本 的 浏 览 器。它 的 机 制 就 是 跟 踪 某 一 个 值 得 引 用 次 数，当 声 明 一 个 变 量 并 且 将 一 个 引 用 类 型 赋 值 给 变 量 得 时 候 引 用 次 数 加 1,当 这 个 变 量 指 向 其 他 一 个 时 引 用 次 数 减 1,当

21、 为 0时 出 发 回 收 机 制 进 行 回 收。27、逐 进 增 强 和 优 雅 降 级 逐 进 增 强 针 对 低 版 本 浏 览 器 进 行 构 建 页 面，保 证 最 基 本 的 功 能，然 后 再 针 对 高 版 本 浏 览 器 进 行 效 果、交 互 等 改 进 和 追 加 功 能 达 到 更 好 的 用 户 体 验。优 雅 降 级 一 开 始 就 构 建 完 整 的 功 能，然 后 再 针 对 低 版 本 浏 览 器 进 行 兼 容 vue面 试 题 1、vue优 点 轻 量 级 速 度 快 简 单 易 学 低 耦 合 可 重 用 性 独 立 开 发 文 档 齐 全，且 文 档

22、 为 中 文 文 档 2、vue父 组 件 向 子 组 件 传 递 数 据 props3、子 组 件 向 父 组 件 传 递 事 件$emit4、v-show和 v-if指 令 的 共 同 点 和 不 同 点 相 同 点:都 可 以 控 制 dom元 素 的 显 示 和 隐 藏 不 同 点:v-show只 是 改 变 display属 性，dom元 素 并 未 消 失，切 换 时 不 需 要 重 新 渲 染 页 面 v-if直 接 将 dom元 素 从 页 面 删 除，再 次 切 换 需 要 重 新 渲 染 页 面 5、如 何 让 CSS只 在 当 前 组 件 中 起 作 用 scoped6、

23、的 作 用 是 什 么 主 要 是 用 于 需 要 频 繁 切 换 的 组 件 时 进 行 缓 存，不 需 要 重 新 渲 染 页 面 7、如 何 获 取 dom给 dom元 素 加 ref=ref n a m e,然 后 通 过 this.$refs.ref name进 行 获 取 dom元 素 8、说 出 几 种 vue当 中 的 指 令 和 它 的 用 法 v-modelv-onv-htmlv-textv-oncev-ifv-show9、vue-loader是 什 么？它 的 用 途 是 什 么？vue文 件 的 一 个 加 载 器，将 template/js/style转 换 为 js

24、模 块 用 途:Js可 以 写 es6、style样 式 10、为 什 么 用 key 给 每 个 dom元 素 加 上 key作 为 唯 一 标 识，diff算 法 可 以 正 确 的 识 别 这 个 节 点，使 页 面 渲 染 更 加 迅 速。11、axios及 安 装？vue项 目 中 使 用 ajax时 需 要 axios插 件 下 载 方 式 cnpm install axios-save12、v-model 的 使 用 v-model用 于 表 单 的 双 向 绑 定，可 以 实 时 修 改 数 据 13、请 说 出 vue.cli项 目 中 src目 录 每 个 文 件 夹 和

25、文 件 的 用 法 components存 放 组 件 app.vue主 页 面 入 口 indexjs主 文 件 入 口 ass存 放 静 态 资 源 文 件 14、分 别 简 述 computed和 watch的 使 用 场 景 用 官 网 的 一 句 话 来 说，所 有 需 要 用 到 计 算 的 都 应 该 使 用 计 算 属 性。多 条 数 据 影 响 一 条 数 据 时 使 用 计 算 属 性，使 用 场 景 购 物 车。如 果 是 一 条 数 据 更 改，影 响 多 条 数 据 时，使 用 w atch,使 用 场 景 搜 索 框。15、v-on可 以 监 听 多 个 方 法 吗

26、？可 以，比 如 v-on=1onclick.onbure1 6、$nextTick的 使 用 在 data。中 的 修 改 后，页 面 中 无 法 获 取 data修 改 后 的 数 据，使 用$nextTick时，当 data中 的 数 据 修 改 后，可 以 实 时 的 渲 染 页 面 17、vue组 件 中 data为 什 么 必 须 是 一 个 函 数？因 为 JavaScript的 特 性 所 导 致，在 component中，data必 须 以 函 数 的 形 式 存 在，不 可 以 是 对 象。组 件 中 的 data写 成 一 个 函 数，数 据 以 函 数 返 回 值 的

27、形 式 定 义，这 样 每 次 复 用 组 件 的 时 候，都 会 返 回 一 份 新 的 d a ta,相 当 于 每 个 组 件 实 例 都 有 自 己 私 有 的 数 据 空 间，他 们 值 负 责 各 自 维 护 数 据，不 会 造 成 混 乱。而 单 纯 的 写 成 对 象 形 式，就 是 所 有 组 件 实 例 共 用 了 一 个 d a ta,这 样 改 一 个 全 部 都 会 修 改。18、渐 进 式 框 架 的 理 解 主 张 最 少 可 以 根 据 不 同 的 需 求 选 择 不 同 的 层 级 19、vue在 双 向 数 据 绑 定 是 如 何 实 现 的？vue双 向

28、数 据 绑 定 是 通 过 数 据 劫 持、组 合、发 布 订 阅 模 式 的 方 式 来 实 现 的，也 就 是 说 数 据 和 视 图 同 步，数 据 发 生 变 化，视 图 跟 着 变 化，视 图 变 化，数 据 也 随 之 发 生 改 变 核 心：关 于 vue双 向 数 据 绑 定，其 核 心 是 Object.definePropertyO方 法 20、单 页 面 应 用 和 多 页 面 应 用 区 别 及 缺 点 单 页 面 应 用(S P A),通 俗 的 说 就 是 指 只 有 一 个 主 页 面 的 应 用，浏 览 器 一 开 始 就 加 载 所 有 的 js、htmk c

29、ss0所 有 的 页 面 内 容 都 包 含 在 这 个 主 页 面 中。但 在 写 的 时 候，还 是 分 开 写，然 后 再 加 护 的 时 候 有 路 由 程 序 动 态 载 入，单 页 面 的 页 面 跳 转，仅 刷 新 局 部 资 源。多 用 于 pc端。多 页 面(M P A),就 是 一 个 应 用 中 有 多 个 页 面，页 面 跳 转 时 是 整 页 刷 新 单 页 面 的 优 点：用 户 体 验 好，快，内 容 的 改 变 不 需 要 重 新 加 载 整 个 页 面，基 于 这 一 点 spa对 服 务 器 压 力 较 小；前 后 端 分 离，页 面 效 果 会 比 较 酷

30、 炫 单 页 面 缺 点：不 利 于 s e o;导 航 不 可 用，如 果 一 定 要 导 航 需 要 自 行 实 现 前 进、后 退。初 次 加 载 时 耗 时 多；页 面 复 杂 度 提 高 很 多。21、Vue项 目 中 为 什 么 要 在 列 表 组 件 中 写 k e y,其 作 用 是 什 么？key是 给 每 一 个 vnode的 唯 一 id,可 以 依 靠 key,更 准 确，更 快 的 拿 到 oldVnode中 对 应 的 vnode节 点。更 准 确 因 为 带 key就 不 是 就 地 复 用 了，在 sameNode函 数 a.key=b.key对 比 中 可 以

31、 避 免 就 地 复 用 的 情 况。所 以 会 更 加 准 确。更 快 利 用 key的 唯 一 性 生 成 map对 象 来 获 取 对 应 节 点，比 遍 历 方 式 更 快。22、父 组 件 和 子 组 件 生 命 周 期 钩 子 执 行 顺 序 是 什 么？加 载 渲 染 过 程 父 beforeCreate-父 created-父 beforeMount-子 beforeCreate-子 created-子 beforeMount-子 mounted-父 mounted 子 组 件 更 新 过 程 父 beforeUpdate-子 beforeUpdate-子 updated-父

32、updated 父 组 件 更 新 过 程 父 beforeUpdate-父 updated 销 毁 过 程 父 beforeDestroy-子 beforeDestroy-子 destroyed-父 destroyed23、谈 一 谈 你 对 nextTick的 理 解？当 你 修 改 了 data的 值 然 后 马 上 获 取 这 个 dom元 素 的 值，是 不 能 获 取 到 更 新 后 的 值，你 需 要 使 用$nextTick这 个 回 调，让 修 改 后 的 data值 渲 染 更 新 到 dom元 素 之 后 在 获 取，才 能 成 功。24、vue组 件 中 data为 什

33、 么 必 须 是 一 个 函 数？因 为 JavaScript的 特 性 所 导 致，在 component中，data必 须 以 函 数 的 形 式 存 在，不 可 以 是 对 象。组 建 中 的 data写 成 一 个 函 数，数 据 以 函 数 返 回 值 的 形 式 定 义，这 样 每 次 复 用 组 件 的 时 候，都 会 返 回 一 份 新 的 d a ta,相 当 于 每 个 组 件 实 例 都 有 自 己 私 有 的 数 据 空 间，它 们 只 负 责 各 自 维 护 的 数 据，不 会 造 成 混 乱。而 单 纯 的 写 成 对 象 形 式，就 是 所 有 的 组 件 实 例

34、 共 用 了 一 个 d a ta,这 样 改 一 个 全 都 改 了。25、vue和 jQuery的 区 另!JjQuery是 使 用 选 择 器($)选 取 DOM对 象，对 其 进 行 赋 值、取 值、事 件 绑 定 等 操 作，其 实 和 原 生 的 HTML的 区 别 只 在 于 可 以 更 方 便 的 选 取 和 操 作 DOM对 象 而 数 据 和 界 面 是 在 一 起 的。比 如 需 要 获 取 label标 签 的 内 容：$(Table).val();,它 还 是 依 赖 DOM元 素 的 值。Vue则 是 通 过 Vue对 象 将 数 据 和 View完 全 分 离 开

35、 来 了。对 数 据 进 行 操 作 不 再 需 要 引 用 相 应 的 DOM对 象，可 以 说 数 据 和 View是 分 离 的，他 们 通 过 Vue对 象 这 个 vm实 现 相 互 的 绑 定。这 就 是 传 说 中 的 MVVM。26、delete和 Vue.delete删 除 数 组 的 区 别 delete只 是 被 删 除 的 元 素 变 成 了 empty/undefined其 他 的 元 素 的 键 值 还 是 不 变。Vue.delete直 接 删 除 了 数 组 改 变 了 数 组 的 键 值。27、SPA首 屏 加 载 慢 如 何 解 决 安 装 动 态 懒 加

36、载 所 需 插 件；使 用 CDN资 源。28、vue项 目 是 打 包 了 一 个 js文 件，一 个 css文 件，还 是 有 多 个 文 件？根 据 vue-cli脚 手 架 规 范，一 个 js文 件，一 个 CSS文 件。29、vue更 新 数 组 时 触 发 视 图 更 新 的 方 法 push();pop();shift();unshiftQ;splice();sort();reverse()30、什 么 是 vue生 命 周 期？有 什 么 作 用？每 个 Vue实 例 在 被 创 建 时 都 要 经 过 一 系 列 的 初 始 化 过 程 一 例 如,需 要 设 置 数 据

37、监 听、编 译 模 板、将 实 例 挂 载 到 DOM并 在 数 据 变 化时 更 新 DOM等。同 时 在 这 个 过 程 中 也 会 运 行 一 些 叫 做 生 命 周 期 钩 子 的 函 数，这 给 了 用 户 在 不 同 阶 段 添 加 自 己 的 代 码 的 机 会。31、第 一 次 页 面 加 载 会 触 发 哪 几 个 钩 子？beforeCreate,created,beforeMount,mounted32、vue获 取 数 据 在 一 般 在 哪 个 周 期 函 数 createdbeforeMountmounted33、created和 mounted的 区 另 I Jc

38、reated:在 模 板 渲 染 成 html前 调 用，即 通 常 初 始 化 某 些 属 性 值，然 后 再 渲 染 成 视 图。mounted:在 模 板 渲 染 成 html后 调 用，通 常 是 初 始 化 页 面 完 成 后，再 对 html的 dom节 点 进 行 一 些 需 要 的 操 作。34、vue生 命 周 期 的 理 解 总 共 分 为 8个 阶 段 创 建 前/后，载 入 前/后，更 新 前/后，销 毁 前/后。创 建 前/后：在 beforeCreated阶 段，vue实 例 的 挂 载 元 素$el和 数 据 对 象 data都 为 undefined,还 未 初

39、 始 化。在 created阶 段，vue实 例 的 数 据 对 象 data有 了，$8 还 没 有。载 入 前/后：在 beforeMount阶 段，vue实 例 的$el和 data都 初 始 化 了，但 还 是 挂 载 之 前 为 虚 拟 的 dom节 点，data.message还 未 替 换。在 mounted阶 段，vue实 例 挂 载 完 成，data.message成 功 渲 染。更 新 前/后：当 data变 化 时，会 触 发 beforeUpdate和 updated方 法。销 毁 前/后：在 执 行 destroy方 法 后、对 data的 改 变 不 会 再 触 发

40、 周 期 函 数，说 明 此 时 vue实 例 已 经 解 除 了 事 件 监 听 以 及 和 dom的 绑 定，但 是 dom结 构 依 然 存 在。35、vuex是 什 么？vue框 架 中 状 态 管 理。36、vuex有 哪 几 种 属 性？有 五 种，State、Getter、Mutation、Actionx Modules ta te:基 本 数 据（数 据 源 存 放 地）g e tte rs:从 基 本 数 据 派 生 出 来 的 数 据 mutations:提 交 更 改 数 据 的 方 法，同 步！actions:像 一 个 装 饰 器，包 裹 m utations,使 之

41、 可 以 异 步。modules:模 块 化 Vuex37、vue全 家 桶 vue-clix vuex、vueRouter、Axios38、vue-cli工 程 常 用 的 npm命 令 有 哪 些？npm install下 载 node_modules资 源 包 的 命 令 npm run dev启 动 vue-cli开 发 环 境 的 npm命 令 npm run build vue-cli生 成 生 产 环 境 部 署 资 源 的 npm命 令 npm run build-report用 于 查 看 vue-cli生 产 环 境 部 署 资 源 文 件 大 小 的 npm命 令 39、

42、请 说 出 vuecli工 程 中 每 个 文 件 夹 和 文 件 的 用 处？build文 件 夹 是 保 存 一 些 webpack的 初 始 化 配 置。config文 件 夹 保 存 一 些 项 目 初 始 化 的 配 置 node_modules是 npm加 载 的 项 目 依 赖 的 模 块 s rc目 录 是 我 们 要 开 发 的 目 录：assets用 来 放 置 图 片 components用 来 放 组 件 文 件 app.vue是 项 目 入 口 文 件 main.js项 目 的 核 心 文 件 40、v-if和 v-show有 什 么 区 别 共 同 点：都 是 动

43、态 显 示 DOM元 素 区 别 点：v-if是 动 态 的 向 DOM树 内 添 加 或 者 删 除 DOM元 素 v-show是 通 过 设 置 DOM元 素 的 display样 式 属 性 控 制 显 隐 v-if切 换 有 一 个 局 部 编 译/卸 载 的 过 程，切 换 过 程 中 合 适 地 销 毁 和 重 建 内 部 的 事 件 监 听 和 子 组 件 v-show只 是 简 单 的 基 于 css切 换 性 能 消 耗 v-if有 更 高 的 切 换 消 耗 v show有 更 高 的 初 始 渲 染 消 耗 使 用 场 景 v-if适 合 运 营 条 件 不 大 可 能

44、改 变 v-show适 合 频 繁 切 换 41 x v-fo r与 v-if的 优 先 级?v for和 v if同 时 使 用，有 一 个 先 后 运 行 的 优 先 级，v-fo r比 v-if优 先 级 更 高，这 就 说 明 在 v-fo r每 次 的 循 环 赋 值 中 每 一 次 调 用 v-if的 判 断，所 以 不 推 荐 v-if和 v-fo r在 同 一 个 标 签 中 同 时 使 用。42、vue常 用 的 修 饰 符？事 件 修 饰 符.stop阻 止 事 件 继 续 传 播.prevent阻 止 标 签 默 认 行 为.capture使 用 事 件 捕 获 模 式，

45、即 元 素 自 身 触 发 的 事 件 先 在 此 处 处 理，然 后 才 交 由 内 部 元 素 进 行 处 理.self只 当 在 eventtarget是 当 前 元 素 自 身 时 触 发 处 理 函 数.once事 件 只 会 触 发 一 次.passive告 诉 浏 览 器 你 不 想 阻 止 事 件 的 默 认 行 为 v-model的 修 饰 符.lazy通 过 这 个 修 饰 符，转 变 为 在 change事 件 再 同 步.number自 动 将 用 户 输 入 值 转 化 为 数 值 类 型.trim自 动 过 滤 用 户 输 入 的 收 尾 空 格 键 盘 事 件 修

46、 饰 符.enter.tab.delete（捕 获“删 除”和“退 格”键）.esc.space.up.down deft.right系 统 修 饰 符.Ctrl.alt.shift.meta鼠 标 按 钮 修 饰 符.left.right.middle43、vue事 件 中 如 何 使 用 event对 象？获 取 事 件 对 象，方 法 参 数 传 递$event。注 意 在 事 件 中 要 使 用$符 号 kbutton click=Event($event)事 件 对 象 44、组 件 传 值 方 式 有 哪 些 1.父 传 子：子 组 件 通 过 props x x 来 接 收 父

47、组 件 传 递 的 属 性 x x的 值 2.子 传 父：子 组 件 通 过 this.$emit(fnName,value)来 传 递，父 组 件 通 过 接 收 fnName事 件 方 法 来 接 收 回 调 3.其 他 方 式：通 过 创 建 一 个 b u s,进 行 传 值 4.使 用 Vuex45、vue中 子 组 件 调 用 父 组 件 的 方 法？直 接 在 子 组 件 中 通 过 this.$parent.event来 调 用 父 组 件 的 方 法。在 子 组 件 里 用$emit()向 父 组 件 触 发 一 个 事 件，父 组 件 监 听 这 个 事 件 就 行 了。父

48、 组 件 把 方 法 传 入 子 组 件 中，在 子 组 件 里 直 接 调 用 这 个 方 法。46、如 何 让 CSS只 在 当 前 组 件 中 起 作 用？在 组 件 中 的 style前 面 加 上 scoped47、如 何 获 取 dom?ref=domName用 法：this.$refs.domName48、vue路 由 跳 转(一)声 明 式 导 航 router-link 不 带 参 数：注 意：router-link中 链 接 如 果 是/开 始 就 是 从 根 路 由 开 始，如 果 开 始 不 带 工 则 从 当 前 路 由 开 始。/name,pathSPfT,建 议

49、用 name 带 参 数:传 递 对 象 vrouter/ink:to=name:detail,query:item:JSON.string y(obj)v/router-link(ZZ)this.$router.push()不 带 参 数:this.$router.push(7home)this.$router.push(name:home)this.$router.push(path:7home)query传 参 卜 路 由 配 置:name:home,path:/home1.跳 转：mis.$router.push(name:,home,query:id:1*)mis.$router.p

50、ush(path:7home,query:id:1)卜 获 取 参 数 html取 参：$route.query.idcript取 参:this.$route.query.id params 传 参 1.路 由 配 置：name:home,path:7home/:id(或 者 path:7home:id)2.跳 转：this.$router.push(name:home,params:id:1)注 意：f/只 能 用 name匹 配 路 由 不 能 用 path params传 参 数(类 似 p o s t)路 由 配 置 path:7home/:id或 者 path:/home:id否 则