Vue框架面试题总结.pdf

《Vue框架面试题总结.pdf》由会员分享，可在线阅读，更多相关《Vue框架面试题总结.pdf（119页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、Vue基 础 知 识 点 1.Vue特 性 轻 量 Vue.js库 的 体 积 非 常 小 的，并 且 不 依 赖 其 他 基 础 库。数 据 绑 定 对 于 一 些 富 交 互、状 态 机 类 似 的 前 端 UI界 面，数 据 绑 定 非 常 简 单、方 便。指 令 内 置 指 令 统 一 为（V*）,也 可 以 自 定 义 指 令，通 过 对 应 表 达 值 的 变 化 就 可 以 修 改 对 应 的 DOM。插 件 化 Vue.js核 心 不 包 含 Router、AJAX、表 单 验 证 等 功 能，但 是 可 以 非 常 方 便 地 根 据 需 要 加 载 对 应 插 件。组 件

2、化 组 件 可 以 扩 展 HTML元 素，封 装 可 重 用 的 代 码。允 许 我 们 使 用 小 型、自 包 含 和 通 常 可 复 用 的 组 件 构 建 大 型 应 用 2.Vue项 目 结 构 介 绍 build文 件 夹：用 于 存 放 webpack相 关 配 置 和 脚 本。config文 件 夹：主 要 存 放 配 置 文 件，比 如 配 置 开 发 环 境 的 端 口 号、开 启 热 加 载 或 开 启 gzip压 缩 等.dist文 件 夹：默 认 命 令 打 包 生 成 的 静 态 资 源 文 件。node_modules:存 放 npm命 令 下 载 的 开 发 环

3、 境 和 生 产 环 境 的 依 赖 包。src:存 放 项 目 源 码 及 需 要 引 用 的 资 源 文 件。src下 assets:存 放 项 目 中 需 要 用 到 的 资 源 文 件，css、js、images等。srcTcom ponets:存 放 vue开 发 中 一 些 公 共 组 件。src下 e m it:自 己 配 置 的 vue集 中 式 事 件 管 理 机 制。src下 router:vue-router vue 路 由 的 配 置 文 件。,srcTservice:自 己 配 置 的 vue请 求 后 台 接 口 方 法。,src下 p a g e:存 在 vue页

4、 面 组 件 的 文 件 夹。src下 u t il:存 放 vue开 发 过 程 中 一 些 公 共 的 js方 法。src下 v u e x:存 放 vuex为 vue专 门 开 发 的 状 态 管 理 器。src下 叩 p.vu e:整 个 工 程 的 vue根 组 件。src下 m ain.js:工 程 的 入 口 文 件。index.htm l:设 置 项 目 的 一 些 meta头 信 息 和 提 供 html元 素 节 点，用 于 挂 载 vue。package.json:对 项 目 的 描 述 以 及 对 项 目 部 署 和 启 动、打 包 的 npm命 令 管 理.3.Vue

5、常 用 指 令 v-model多 用 于 表 单 元 素 实 现 双 向 数 据 绑 定（同 angular中 的 ng-model）v-for格 式：v-for=字 段 名 in（of）数 组 js o n 循 环 数 组 或 json（同 angular中 的 ng-repeat）,需 要 注 意 从 vue2开 始 取 消 了$index v-show 显 示 内 容（同 angular中 的 ng-show）v-hide 隐 藏 内 容（同 angular中 的 ng-hide）v-i f显 示 与 隐 藏（dom元 素 的 删 除 添 加 同 angular中 的 ng-if默 认

6、值 为 false）v-else-if必 须 和 v-if连 用 v-else必 须 和 v-i唯 用 不 能 单 独 使 用 否 则 报 错 模 板 编 译 错 误 v-bind动 态 绑 定 作 用：及 时 对 页 面 的 数 据 进 行 更 改 v-on:click给 标 签 绑 定 函 数，可 以 缩 写 为,例 如 绑 定 一 个 点 击 函 数 函 数 必 须 写 在 methods里 面 v-te xt解 析 文 本 v-h tm l解 析 htrrd标 签 v-bind:class 三 种 绑 定 方 法 1、对 象 型 red:isred 2、三 元 型 isred?red:

7、blue 3、数 组 型 red:isred,blue:isblue v-once进 入 页 面 时 只 渲 染 一 次 不 在 进 行 渲 染 v-cloak防 止 闪 烁 v-p re把 标 签 内 部 的 元 素 原 位 输 出 4.Vue常 用 的 修 饰 符 a、按 健 修 饰 符 如：.delete(捕 获 删 除 和“退 格 键)用 法 上 和 事 件 修 饰 符 一 样，挂 载 在 v-on后 面，语 法:v-on:keyup.xxx=yyy b、系 统 修 饰 符 可 以 用 如 下 修 饰 符 来 实 现 仅 在 按 下 相 应 按 键 时 才 触 发 鼠 标 或 键 盘

8、事 件 的 监 听 器(1).ctrl(2).alt.shift(4).metaQ 鼠 标 按 钮 修 饰 符(1).left(2).right(3).middle这 些 修 饰 符 会 限 制 处 理 函 数 仅 响 应 特 定 的 鼠 标 按 钮。如：button click.middle=onClickA 鼠 标 滚 轮 单 击 触 发 Click默 认 是 鼠 标 左 键 单 击 d、其 他 修 饰 符(1).lazy在 默 认 情 况 下，v-model在 每 次 input事 件 触 发 后 将 输 入 框 的 值 与 数 据 进 行 同 步，我 们 可 以 添 加 lazy修 饰

9、 符，从 而 转 变 为 使 用 change事 件 进 行 同 步：(2).number如 果 想 自 动 将 用 户 的 输 入 值 转 为 数 值 类 型，可 以 给 v-model添 加.number修 饰 符：这 通 常 很 有 用，因 为 即 使 在 type=number”时，HTML输 入 元 素 的 值 也 总 会 返 回 字 符 串。如 果 这 个 值 无 法 被 parseFloatQ解 析，则 会 返 回 原 始 的 值。.trim如 果 要 自 动 过 滤 用 户 输 入 的 首 尾 空 白 字 符，可 以 给 v-model添 加 trim 修 饰 符：同 样 前

10、面 都 有 空 格 加 上.trim后 将 前 后 空 格 都 去 掉 了。5.条 件 渲 染 v-if:条 件 指 令 in p ut type=checkbox v-model=ok”同 意 许 可 协 议 if：Lorem ipsum dolor s it amet.nov-sh o w:条 件 指 令 使 用 v-show完 成 和 上 面 相 同 的 功 能 show：Lorem ipsum dolor s it amet.no v-if是“真 正”的 条 件 渲 染，因 为 它 会 确 保 在 切 换 过 程 中 条 件 块 内 的 事 件 监 听 器 和 子 组 件 适 当 地

11、被 销 毁 和 重 建。V-if也 是 惰 性 的：如 果 在 初 始 渲 染 时 条 件 为 假，则 什 么 也 不 做 一 一 直 到 条 件 第 一 次 变 为 真 时，才 会 开 始 渲 染 条 件 块。相 比 之 下，v-show就 简 单 得 多 一 一 不 管 初 始 条 件 是 什 么，元 素 总 是 会 被 渲 染，并 且 只 是 简 单 地 基 于 CSS进 行 切 换。一 般 来 说，v-if有 更 高 的 切 换 开 销，而 v-show有 更 高 的 初 始 渲 染 开 销。因 此，如 果 需 要 非 常 频 繁 地 切 换，则 使 用 v-show较 好；如 果 在

12、 运 行 时 条 件 很 少 改 变，则 使 用 v-if较 好。6.列 表 渲 染 v-fo r:列 表 循 环 指 令 简 单 的 列 表 渲 染 n!如 果 想 获 取 索 引，则 使 用 index关 键 字，注 意，圆 括 号 中 的 index必 须 放 在 后 面 一,n-index 遍 历 数 据 列 表 data:u s e rL is t:id:1,username:h e le n,age:18),id:2,username:*p e te r*,age:28),id:3,username:*andy*,age:38)2、遍 历 数 据 列 表 一!-1ndex ite

13、m.id 1tem.usernam e ite m.a g e 7.组 件 组 件(Component)是 Vue.js最 强 大 的 功 能 之 一。组 件 可 以 扩 展 HTML元 素，封 装 可 重 用 的 代 码。组 件 系 统 让 我 们 可 以 用 独 立 可 复 用 的 小 组 件 来 构 建 大 型 应 用，几 乎 任 意 类 型 的 应 用 的 界 面 都 可 以 抽 象 为 一 个 组 件 树：(1)局 部 组 件 var app=new Vue(e l:*#app*,/定 义 局 部 组 件，这 里 可 以 定 义 多 个 局 部 组 件 components:/组 件

14、 的 名 字*Navbarf:/组 件 的 内 容 tem plate:首 页 学 员 管 理)使 用 组 件(2)全 局 组 件 定 义 全 局 组 件：components/Navbar.js/定 义 全 局 组 件 Vponent(*Navbar,tem plate:首 页 学 员 管 理 讲 师 管 理)var app=new Vue(e l:#app)Vue核 心 知 识 点 1.对 于 Vue是 一 套 渐 进 式 框 架 的 理 解 渐 进 式 代 表 的 含 义 是：没 有 多 做 职 责 之 外 的 事，vue.js只 提 供 了 vue-di生 态 中 最 核 心 的 组

15、件 系 统 和 双 向 数 据 绑 定，就 好 像 vuex、vue-router都 属 于 围 绕 vue.js开 发 的 库。示 例：使 用 Angular,必 须 接 受 以 下 东 西：1）必 须 使 用 它 的 模 块 机 制。2）必 须 使 用 它 的 依 赖 注 入。3）必 须 使 用 它 的 特 殊 形 式 定 义 组 件（这 一 点 每 个 视 图 框 架 都 有，这 是 难 以 避 免 的）所 以 Angular是 带 有 比 较 强 的 排 它 性 的，如 果 你 的 应 用 不 是 从 头 开 始，而 是 要 不 断 考 虑 是 否 跟 其 他 东 西 集 成，这 些

16、主 张 会 带 来 一 些 困 扰。使 用 R eact,你 必 须 理 解：1）函 数 式 编 程 的 理 念。2）需 要 知 道 它 的 副 作 用.3）什 么 是 纯 函 数。4）如 何 隔 离、避 免 副 作 用。5）它 的 侵 入 性 看 似 没 有 Angular那 么 强，主 要 因 为 它 是 属 于 软 性 侵 入 的。Vue与 React、Angular的 不 同 是，但 它 是 渐 进 的：1）可 以 在 原 有 的 大 系 统 的 上 面，把 一 两 个 组 件 改 用 它 实 现，就 是 当 成 jQuery来 使 用。2）可 以 整 个 用 它 全 家 桶 开 发，

17、当 Angular来 使 用。3）可 以 用 它 的 视 图，搭 配 你 自 己 设 计 的 整 个 下 层 使 用.4）可 以 在 底 层 数 据 逻 辑 的 地 方 用 0。和 设 计 模 式 的 那 套 理 念。5）可 以 函 数 式，它 只 是 个 轻 量 视 图 而 已，只 做 了 最 核 心 的 东 西。2.vue.js的 两 个 核 心 是 什 么？数 据 驱 动 和 组 件 系 统：数 据 驱 动：ViewModel,保 证 数 据 和 视 图 的 一 致 性。组 件 系 统：应 用 类 UI可 以 看 作 全 部 是 由 组 件 树 构 成 的。3.请 问 v-i f 和 v

18、-show有 什 么 区 别 相 同 点：两 者 都 是 在 判 断 DOM节 点 是 否 要 显 示。不 同 点：（1）实 现 方 式：v-if是 根 据 后 面 数 据 的 真 假 值 判 断 直 接 从 Dom树 上 删 除 或 重 建 元 素 节 点。v-show只 是 在 修 改 元 素 的 css样 式，也 就 是 display的 属 性 值，元 素 始 终 在 Dom树 上.（2）编 译 过 程：v-if切 换 有 一 个 局 部 编 译/卸 载 的 过 程，切 换 过 程 中 合 适 地 销 毁 和 重 建 内 部 的 事 件 监 听 和 子 组 件；v-show只 是 简

19、单 的 基 于 cs沏 换；（3）编 译 条 件：v-if是 惰 性 的，如 果 初 始 条 件 为 假，则 什 么 也 不 做；只 有 在 条 件 第 一 次 变 为 真 时 才 开 始 局 部 编 译；v-show是 在 任 何 条 件 下（首 次 条 件 是 否 为 真）都 被 编 译，然 后 被 缓 存，而 且 DOM元 素 始 终 被 保 留；（4）性 能 消 耗：v-i隋 更 高 的 切 换 消 耗，不 适 合 做 频 繁 的 切 换；v-show有 更 高 的 初 始 渲 染 消 耗，适 合 做 频 繁 的 额 切 换；4.v-for与 v-if的 优 先 级 当 它 们 处 于

20、 同 一 节 点，v-for的 优 先 级 比 v-i度 高，这 意 味 着 v-if将 分 别 重 复 运 行 于 每 个 v-for循 环 中。当 你 想 为 仅 有 的 一 些 项 渲 染 节 点 时，这 种 优 先 级 的 机 制 会 十 分 有 用，如 下：todo）上 面 的 代 码 只 传 递 了 未 完 成 的 todoso而 如 果 你 的 目 的 是 有 条 件 地 跳 过 循 环 的 执 行，那 么 可 以 将 v-if置 于 外 层 元 素（或 template）上。如：todo No todos l e f t!5.v on可 以 监 听 多 个 方 法 吗？v-on

21、可 以 监 听 多 个 方 法 点 我 text鼠 标 进 来/button 鼠 标 进 来 2v/button!个 事 件 绑 定 多 个 函 数，按 顺 序 执 行，这 里 分 隔 函 数 可 以 用 逗 号 也 可 以 用 分 号 一 点 我 abonetwothree 1 nput type=nte x t placeholder=在 这 里 按 d elete”button ty p e=s u b m i点 我 提 交/button export d e fa u lt methods:/这 里 是 es6对 象 里 函 数 写 法 aO console.lo g(a);),b()

22、console.lo g(b);,one()console.logCone);this.tw oO;th is.three();,two()console.lo g(,twon);),three()console.log(th re e);,myclickfmsgl,msg2,msg3,event)console.log(msgl+msg2+-+msg3);console.1og(event);,onKeyupO console.log(*you press delete*);,onSubmitO console.log(sumite d);,onEnterf)console.log(mous

23、e e n te r);,onLeaveO console.log(mouse le ave);),)；6.vue中 k e y值 的 作 用 使 用 key来 给 每 个 节 点 做 一 个 唯 一 标 识 key的 作 用 主 要 是 为 了 高 效 的 更 新 虚 拟 DOM。另 外 vue中 在 使 用 相 同 标 签 名 元 素 的 过 渡 切 换 时，也 会 使 用 到 key属 性，其 目 的 也 是 为 了 让 vue可 以 区 分 它 们，否 则 vue只 会 替 换 其 内 部 属 性 而 不 会 触 发 过 渡 效 果。7.vue-cli工 程 升 级 vue版 本 np

24、m install-g vue/di8.vue事 件 中 如 何 使 用 event对 象？注 意 在 事 件 中 要 使 用$符 号/h tm l部 分 event/j s 部 分 showEvent(event)/获 取 自 定 义 data-i dconsole.log(event.ta rg e t.d ataset.id)/阻 止 事 件 冒 泡 event.stopP ropagation();/阻 止 默 认 event.preventD efault()9.$nextTick的 使 用 参 数:Function callback用 法：将 回 调 延 迟 到 下 次 DOM更

25、新 循 环 之 后 执 行。在 修 改 数 据 之 后 立 即 使 用 它，然 后 等 待 DOM更 新。它 跟 全 局 方 法 Vue.nextTick 一 样，不 同 的 是 回 调 的 th is自 动 绑 定 到 调 用 它 的 实 例 上。实 例:msg$nextTi ckexport d e fa u lt name:*n e x tT ic k,data()return m s g:未 更 新),methods:changef)/修 改 数 据 t h is.msg=被 更 新 了/D O M 还 没 有 更 新 console.lo g C th is.$refs.m sgp.

26、i nnerHTML)th is.$n e x tT ic k()=/D O M 更 新 了 console.log(*$ne xtT ick:*+th i s.$re fs.msgp.i nnerHTML),createdO$nextTick()的 应 用 场 景：在 vue的 生 命 周 期 createdO钩 子 函 数 中 进 行 dom操 作，一 定 要 放 在$nextTick()函 数 中 执 行。在 createdO钩 子 函 数 执 行 的 时 候 DOM其 实 并 未 进 行 任 何 渲 染，而 此 时 进 行 DOM操 作 无 异 于 徒 劳，所 以 此 处 一 定 要

27、将 DOM操 作 的 代 码 放 进 nextTick()的 回 调 函 数 中。mounted。钩 子 函 数，因 为 该 钩 子 函 数 执 行 时，所 有 的 DOM挂 析 口 渲 染 都 已 完 成，此 时 在 该 钩 子 函 数 中 进 行 任 1可 DOM操 作 都 不 会 有 问 题，在 数 据 变 化 后 要 执 行 某 个 操 作，而 这 个 操 作 需 要 随 数 据 改 变 而 改 变 DOM结 构 时，这 个 操 作 都 是 需 要 放 置$nextTick()的 回 调 函 数 中。10.V ue组 件 中 d a ta为 什 么 必 须 是 函 数 在 newVue

28、()中，data是 可 以 作 为 一 个 对 象 进 行 操 作 的，然 而 在 component中，data只 能 以 函 数 的 形 式 存 在，不 能 直 接 将 对 象 赋 值 给 它。当 data选 项 是 一 个 函 数 的 时 候，每 个 实 例 可 以 维 护 一 份 被 返 回 对 象 的 独 立 的 拷 贝，这 样 各 个 实 例 中 的 data不 会 相 互 影 响，是 独 立 的。11.vue中 子 组 件 调 用 父 组 件 的 方 法 Vue中 子 组 件 调 用 父 组 件 的 方 法，这 里 有 三 种 方 法 提 供 参 考 第 一 种 方 法 是 直

29、接 在 子 组 件 中 通 过 this.$parent.event来 调 用 父 组 件 的 方 法 父 组 件 import c h ild from*/components/dam/chiId;export d e fa u lt components:c h ild),methods:fatherMethodO console.log(测 试);)；子 组 件 button cli ck=chi 1 d M e th o d O 点 击/button export d e fa u lt methods:childMethod()th i s.$parent.fatherMethodO

30、;);第 二 种 方 法 是 在 子 组 件 里 用$e m it向 父 组 件 触 发 一 个 事 件，父 组 件 监 听 这 个 事 件 就 行 了。父 组 件 import c h ild from*/components/dam/chiId,;export d e fa u lt components:c h ild),methods:fatherMethod()console.log(测 试)；)；子 组 件 点 击/button export d e fa u lt methods:childMethod()t h is.$emi t(*fatherMethod1);)；第 三 种

31、 是 父 组 件 把 方 法 传 入 子 组 件 中，在 子 组 件 里 直 接 调 用 这 个 方 法 父 组 件 import c h ild from*/components/dam/chiId;export d e fa u lt components:c h ild),methods:fatherMethod()console.lo g。测 试)；)；子 组 件 点 击/button,export d e fa u lt props:fatherMethod:type:Function,d e fa u lt:n u l1),methods:childMethodC)i f(t h

32、is.fatherMethod)th is.fa th e rM e th o d();)；12.vue中 k e e p-a liv e组 件 的 作 用 作 用：用 于 保 留 组 件 状 态 或 避 免 重 新 渲 染(缓 存 的 作 用)比 如：当 一 个 目 录 页 面 与 一 个 详 情 页 面，用 户 经 常：打 开 目 录 页 面=进 入 详 情 页 面 二 返 回 目 录 页 面=打 开 详 情 页 面，这 样 目 录 页 面 就 是 一 个 使 用 频 率 很 高 的 页 面，那 么 就 可 以 对 目 录 组 件 使 用 进 行 缓 存，这 样 用 户 每 次 返 回 目

33、 录 时，都 能 从 缓 存 中 快 速 渲 染，而 不 用 重 新 渲 染。13.vue中 如 何 编 写 可 复 用 的 组 件？组 件，是 一 个 具 有 一 定 功 能，且 不 同 组 件 间 功 能 相 对 独 立 的 模 块。高 内 聚、低 耦 合。开 发 可 复 用 性 的 组 件 应 遵 循 以 下 原 则：1)规 范 化 命 名：组 件 的 命 名 应 该 跟 业 务 无 关，而 是 依 据 组 件 的 功 能 命 名。2)数 据 扁 平 化：定 义 组 件 接 口 时，尽 量 不 要 将 整 个 对 象 作 为 一 个 prop传 进 来。每 个 prop应 该 是 一 个

34、 简 单 类 型 的 数 据。这 样 做 有 下 列 几 点 好 处：(1)组 件 接 口 清 晰。(2)props校 验 方 便。(3)当 服 务 端 返 回 的 对 象 中 的 key名 称 与 组 件 接 口 不 一 样 时，不 需 要 重 新 构 造 一 个 对 象。扁 平 化 的 props能 让 我 们 更 直 观 地 理 解 组 件 的 接 口。!-反 例 3)可 复 用 组 件 只 实 现 UI相 关 的 功 能，即 展 示、交 互、动 画，如 何 获 取 数 据 跟 它 无 关，因 此 不 要 在 组 件 内 部 去 获 取 数 据。4)可 复 用 组 件 应 尽 量 减 少

35、 对 外 部 条 件 的 依 赖，所 有 与 vuex相 关 的 操 作 都 不 应 在 可 复 用 组 件 中 出 现。5)组 件 在 功 能 独 立 的 前 提 下 应 该 尽 量 简 单，越 简 单 的 组 件 可 复 用 性 越 强。6)组 件 应 具 有 一 定 的 容 错 性。7)组 件 应 当 避 免 对 其 父 组 件 的 依 赖，不 要 通 过 this.parent来 操 作 父 组 件 的 示 例。父 组 件 也 不 要 通 过 this.children来 引 用 子 组 件 的 示 例，而 是 通 过 子 组 件 的 接 口 与 之 交 互。8)可 复 用 组 件 除

36、 了 定 义 一 个 清 晰 的 公 开 接 口 外，还 需 要 有 命 名 空 间。命 名 空 间 可 以 避 免 与 浏 览 器 保 留 标 签 和 其 他 组 件 的 冲 突.特 别 是 当 项 目 引 用 外 部 UI组 件 或 组 件 迁 移 到 其 他 项 目 时，命 名 空 间 可 以 避 免 很 多 命 名 冲 突 的 问 题。14.什 么 是 vue生 命 周 期？vue生 命 周 期 是 指 vue实 例 对 象 从 创 建 之 初 到 销 毁 的 过 程，vue所 有 功 能 的 实 现 都 是 围 绕 其 生 命 周 期 进 行 的，在 生 命 周 期 的 不 同 阶

37、段 调 用 对 应 的 钩 子 函 数 实 现 组 件 数 据 管 理 和 DOM渲 染 两 大 重 要 功 能。vue生 命 周 期 的 这 八 个 阶 段：1)创 建 前(beforeCreate)对 应 的 钩 子 函 数 为 beforeCreate。此 阶 段 为 实 例 初 始 化 之 后，此 时 的 数 据 观 察 和 事 件 机 制 都 未 形 成，不 能 获 得 DOM节 点。2)创 建 后(created)对 应 的 钩 子 函 数 为 created。在 这 个 阶 段 vue实 例 已 经 创 建，仍 然 不 能 获 取 DOM元 素。3,载 入 前(beforeMou

38、nt)对 应 的 钩 子 函 数 是 beforeMount,在 这 一 阶 段，我 们 虽 然 依 然 得 不 到 具 体 的 DOM元 素，但 vue挂 载 的 根 节 点 已 经 创 建，下 面 vue对 DOM的 操 作 将 围 绕 这 个 根 元 素 继 续 进 行；beforeMount这 个 阶 段 是 过 渡 性 的，一 般 一 个 项 目 只 能 用 到 一 两 次。4,载 入 后(mounted)对 应 的 钩 子 函 数 是 mounted。mounted是 平 时 我 们 使 用 最 多 的 函 数 了，一 般 我 们 的 异 步 请 求 都 写 在 这 里。在 这 个

39、 阶 段，数 据 和 DOM都 已 被 渲 染 出 来。5,更 新 前(beforeUpdate)对 应 的 钩 子 函 数 是 beforeUpdate。在 这 一 阶 段，vue遵 循 数 据 驱 动 DOM的 原 则。beforeUpdate函 数 在 数 据 更 新 后 虽 然 没 立 即 更 新 数 据，但 是 DOM中 的 数 据 会 改 变，这 是 Vue双 向 数 据 绑 定 的 作 用。6,更 新 后(updated)对 应 的 钩 子 函 数 是 updated。在 这 一 阶 段 DOM会 和 更 改 过 的 内 容 同 步。7,销 毁 前(beforeDestroy)对

40、 应 的 钩 子 函 数 是 beforeDestroy。在 上 一 阶 段 Vue已 经 成 功 的 通 过 数 据 驱 动 DOM更 新，当 我 们 不 再 需 要 vue操 纵 DOM时，就 要 销 毁 Vue,也 就 是 清 除 vue实 例 与 DOM的 关 联，调 用 destroy方 法 可 以 销 毁 当 前 组 件。在 销 毁 前，会 触 发 beforeDestroy钩 子 函 数。8,销 毁 后(destroyed)对 应 的 钩 子 函 数 是 destroyed。在 销 毁 后，会 触 发 destroyed钩 子 函 数。vue的 生 命 周 期 的 思 想 贯 穿

41、 在 组 件 开 发 的 始 终，通 过 熟 悉 其 生 命 周 期 调 用 不 同 的 钩 子 函 数，我 们 可 以 准 确 的 控 制 数 据 流 和 其 对 DOM的 影 响；vue生 命 周 期 的 思 想 是 Vnode和 MW M的 生 动 体 现 和 继 承。15.vue生 命 周 期 钩 子 函 数 有 哪 些？1)VUE生 命 周 期 是 VUE实 例 化 或 者 组 件 创 建 到 消 亡 的 过 程。2)beforeCreate创 建 前 的 状 态，初 始 化 事 件 和 生 命 周 期。3)创 建 完 毕 状 态 Init(初 始 化)injections(依 赖

42、注 入)&reactivity(开 始 响 应)。4)beforeMount挂 载 前 状 态，是 否 有 元 素 e l,是 否 有 模 板，是 否 渲 染 到 了 函 数 内，是 否 作 为 模 板 进 行 了 outerHTML渲 染 到 了 页 面，向 虚 拟 DOM上 挂 载 的 过 程，并 且 还 是 把 我 们 的#app，生 成 虚 拟 D O M,生 成 完 毕 后 并 渲 染 到 view层。5)mounted挂 载 结 束 状 态，渲 染 到 真 正 的 DOM。6)beforeUpdate可 以 拿 到 Vue实 例 化 改 变 前 的 状 态。7)Updated拿 到

43、 变 动 完 成 的 状 态。8)beforeDestroy消 亡 前 的 状 态。9)destroyed实 例 化 或 组 件 被 摧 毁 消 亡。16.vue如 何 监 听 键 盘 事 件 中 的 按 键？在 Vue中，已 经 为 常 用 的 按 键 设 置 了 别 名，这 样 我 们 就 无 需 再 去 匹 配 keycode,直 接 使 用 别 名 就 能 监 听 按 键 的 事 件。另 外，Vue中 还 支 持 组 合 写 法:别 名 实 际 键 值.delete delete（删 除）/Backspace（退 格）.tab Tab.enter Enter（回 车）.esc Esc（

44、退 出）.space Space（空 格 键）,left Left（左 箭 头）.up Up（上 箭 头）.right Right（右 箭 头）.down Down（下 箭 头）,Ctrl Ctrl,alt Alt.shift Shift.meta（window系 统 下 是 window键，mac下 是 command键）组 合 写 法 按 健 组 合 key up.a It.6 7 unction Alt+Cclick.ctrl=MfunctionKCtrl+Click但 是，如 果 是 在 自 己 封 装 的 组 件 或 者 是 使 用 一 些 第 三 方 的 UI库 时，会 发 现 并

45、 不 起 效 果，这 时 就 需 要 用 到.n a tiv e修 饰 符 了，如：如 果 遇 到.nati ve修 饰 符 也 无 效 的 情 况，可 能 就 需 要 用 到$】i steners 了.17.vue更 新 数 组 时 触 发 视 图 更 新 的 方 法 1)Vue.set响 应 式 新 增 与 修 改 数 据 可 以 设 置 对 象 或 数 组 的 值，通 过 key或 数 组 索 引，可 以 触 发 视 图 更 新#Vue.set(target,key,value)参 数：。Object Array target。string number key any value 返

46、回 值：设 置 的 值.用 法：设 置 对 象 的 属 性。如 果 对 象 是 响 应 式 的，确 保 属 性 被 创 建 后 也 是 响 应 式 的，同 时 触 发 视 图 更 新。这 个 方 法 主 要 用 于 避 开 Vue不 能 检 测 属 性 被 添 加 的 限 制。注 意 对 象 不 能 是 Vue实 例，或 者 Vue实 例 的 根 数 据 对 象。ta rg e t:要 更 改 的 数 据 源(可 以 是 对 象 或 者 数 组)k e y:要 更 改 的 具 体 数 据 value:重 新 赋 的 值 数 组 修 改 vue.set(array,indexofltem,new

47、value)this.array.$set(indexofltem,newvalue)对 象 修 改 Vue.set(obj,keyOfltem,newvalue)this.obj.$set(keyOfltem,newvalue)2)Vue.delete删 除 对 象 或 数 组 中 元 素，通 过 key或 数 组 索 引，可 以 触 发 视 图 更 新#Vue.delete(target,key)参 数：。Object|Array target string|number key/index仅 在 2 2 0+版 本 中 支 持：还 支 持 Array+index用 法。用 法：删 除 对

48、 象 的 属 性。如 果 对 象 是 响 应 式 的，确 保 删 除 能 触 发 更 新 视 图。这 个 方 法 主 要 用 于 避 开 Vue不 能 检 测 到 属 性 被 删 除 的 限 制，但 是 你 应 该 很 少 会 使 用 它。目 标 对 象 不 能 是 一 个 Vue示 例 或 Vue示 例 的 根 数 据 对 象。数 组 修 改 Vue.delete(array,indexofltem)thi s.array.$delete(i ndexofltem)对 象 修 改 Vue.delete(obj,keyOfltem)thi s.obj.$delete(keyOfltem)3)数

49、 组 对 象 直 接 修 改 属 性，可 以 触 发 视 图 更 新 this.array0.show=true;this.array.forEach(function(item)i tern,show=true;)；4)splice方 法 修 改 数 组，可 以 触 发 视 图 更 新 this.array.splice(indexofltem,1,newElement)5)数 组 整 体 修 改，可 以 触 发 视 图 更 新 var tempArray=this.array;tempArray0.show=true;thi s.array=tempArray;6)用 Object.ass

50、ign或 lodash.assign可 以 为 对 象 添 加 响 应 式 属 性，可 以 触 发 视 图 更 新/o b je c t.a s s ig n的 单 层 的 覆 盖 前 面 的 属 性，不 会 递 归 的 合 并 属 性 th is.o b j=O b je c t.a s s ig n(),th is.o b j,a:l,b:2)/a s s ig n与 o b je c t.assign 一 样 t h i s.obj=_.a s s ig n(),t h is.o b j,a:1,b:2)/m e rge会 递 归 的 合 并 属 性 th is.o b j=m e rg