没有合适的资源?快使用搜索试试~ 我知道了~
面试涉及的内容
资源推荐
资源详情
资源评论
( 2) 服 务 端 渲 染 的 缺 点 :
• 更多的开发条件限制:例如服务端渲染只支持 beforCreate 和 created 两个钩子函数,
这会导致一些外部扩展库需要 特殊处理,才能在服务端渲染应用程序中运行;并且与可以
部署在任何静态文件服务器上的完全静态单页面应用程 序 SPA 不同,服务端渲染应用程
序 , 需 要 处 于 Node.js server 运 行 环 境 ;
所以 Vue 中 key 的作用是:key 是为 Vue 中 vnode 的唯一标记,通过这个 key,我们
的 diff 操作可以更准确、更快速 更准确:因为带 key 就不是就地复用了,在 sameNode
函 数 a.key === b.key 对 比 中 可 以 避 免 就 地 复 用 的 情 况 。
所以会更加准确。 更快速:利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方
式 更 快 , 源 码 如 下 :
• Action : 用 于 提 交 mutation , 而 不 是 直 接 变 更 状 态 , 可 以 包 含 任 意 异 步 操 作 。
• Module:允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
17、使用过 Vue SSR 吗?说说 SSR? Vue.js 是构建客户端应用程序的框架。默认情况下,
可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。 然而,也可以将同一个
组件渲染为服务端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活
"为 客户端上完全可交互的应用程序。即:SSR 大致的意思就是 vue 在客户端将标签渲染成
的整个 html 片段的工作在服 务端完成,服务端形成的 html 片段直接返回给客户端这个
过 程 就 叫 做 服 务 端 渲 染 。
vm.items.splice(indexOfItem, 1, newValue)
为 了 解 决 第 二 个 问 题 , Vue 提 供 了 以 下 操 作 方 法 :
// Array.prototype.splice
vm.items.splice(newLength)7 、 谈 谈 你 对 Vue 生 命 周 期 的 理 解 ?
(1)生命周期是什么? Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数
据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue
的 生 命 周 期 。
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,避免重新渲染 ,其
有 以 下 特 性 :
• 一 般 结 合 路 由 和 动 态 组 件 一 起 使 用 , 用 于 缓 存 组 件 ;
• 提供 include 和 exclude 属性,两者都支持字符串或正则表达式, include 表示只有名
称匹配的组件会被缓 存,exclude 表示任何名称匹配的组件都不会被缓存 ,其中 exclude
的 优 先 级 比 include 高 ;
6、直接给一个数组项赋值,Vue 能检测到变化吗? 由于 Java 的限制,Vue 不能检测到
以 下 数 组 的 变 动 :
• 当你利用索引直接设 置 一 个 数 组 项 时 , 例 如 : vm.items[indexOfItem] = newValue
• 当 你 修 改 数 组 的 长 度 时 , 例 如 : vm.items.length = newLength
早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单,location.hash
的值就是 URL 中 # 后面的 内容。比如下面这个网站,它的 location.hash 的值为
'#search' :
hash 路 由 模 式 的 实 现 主 要 是 基 于 下 面 几 个 特 性 :
• URL 中 hash 值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash 部分
不 会 被 发 送 ;
• 更快的内容到达时间(首屏加载更快):SPA 会等待所有 Vue 编译后的 js 文件都下载完
成后,才开始进行页面的 渲染,文件下载等需要一定的时间等,所以首屏渲染需要一定的
时间;SSR 直接由服务端渲染好页面直接返回显 示,无需等待下载 js 文件及再去渲染等,
所 以 SSR 有 更 快 的 内 容 到 达 时 间 ;
var app = new
Vue({
el: '#app',
data: { // 用 于 描 述 视 图 状 态
message: 'Hello
Vue!',
},
methods: { // 用 于 描 述 视 图 行 为
showMessage{
letvm = this;
alert(vm.message);
}
},
created{
letvm = this;
}
/**
* 对 属 性 进 行 递 归 遍 历
*/
letchildOb = !shallow && observe(val) // observe 功 能 为 监 测 数 据 的 变 化
通过以上 Vue 源码部分查看,我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象,
从而达到利用 Object.defineProperty 也能对对象和数组(部分方法的操作)进行监听。
break
case'hash':
this.history = new HashHistory(this, options.base, this.fallback)
break
case'abstract':
this.history = new AbstractHistory(this, options.base)
( 2 ) Webpack 层 面 的 优 化
• Webpack 对 图 片 进 行 压 缩
• 减 少 ES6 转 为 ES5 的 冗 余 代 码
• 提 取 公 共 代 码
• 模 板 预 编 译
• 提 取 组 件 的 CSS
• 优 化 SourceMap
• 构 建 结 果 输 出 分 析
• Vue 项 目 的 编 译 优 化
( 3 ) 基 础 的 Web 技 术 的 优 化
• 开 启 gzip 压 缩
• 浏 览 器 缓 存
18、vue-router 路由模 式 有 几 种 ? vue-router 有 3 种 路由 模式:hash、history、
abstract , 对 应 的 源 码 如 下 所 示 :
switch (mode)
{
case'history':
this.history = new HTML5History(this, options.base)
• 基 于 treeshaking 优 化 , 提 供 了 更 多 的 内 置 功 能 。
30、说说你使用 Vue 框架踩过最大的坑是什么?怎么解决的? 本题为开放题目,欢迎大
家在评论区畅所欲言,分享自己的踩坑、填坑经历,提供前车之鉴,避免大伙再次踩坑 ~~~
总 结
本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式
进行整理汇总,意在帮助作 者及读者自测下 Vue 掌握的程度。希望对读完本文的你有帮
助 、 有 启 发 , 如 果 有 不 足 之 处 , 欢 迎 批 评 指 正 交 流 !
服 务 端 渲 染 SSR 的 优 缺 点 如 下 :
( 1 ) 服 务 端 渲 染 的 优 点 :
• 更好的 SEO:因为 SPA 页面的内容是通过 Ajax 获取,而搜索引擎爬取工具并不会等待
Ajax 异步完成后再抓取页 面内容,所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内
容;而 SSR 是直接由服务端返回已经渲染好的页面 (数据已经包含在页面中),所以搜索
引 擎 爬 取 工 具 可 以 抓 取 渲 染 好 的 页 面 ;
• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty
只 能 遍 历 对 象 属 性 直 接 修 改 ;
• Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能
红 利 ;
Object.defineProperty 的 优 势 如 下 :
• 兼容性好,支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平,因
此 Vue 的 作 者 才 声 明 需 要 等 到 下 个 大 版 本 ( 3.0 ) 才 能 用 Proxy 重 写 。
剩余27页未读,继续阅读
资源评论
头像是我的目标
- 粉丝: 4
- 资源: 16
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功